Update 14h - 30/03/2023
This commit is contained in:
File diff suppressed because one or more lines are too long
287
demo-audio-2/css/style_mobile.css
Normal file
287
demo-audio-2/css/style_mobile.css
Normal file
@@ -0,0 +1,287 @@
|
||||
:root{--color-primary:#ff5c00;--color-secondary:#1f1f1f;--white:#fff;--black:#000;--gray:#b7b7b7;--gray-2:#999999;--box-shadow:0px 1px 6px rgba(0, 0, 0, 0.2);--marker-color:#d9d9d9}
|
||||
*,::after,::before{padding:0;margin:0;-webkit-box-sizing:inherit;box-sizing:inherit}
|
||||
html{font-size:14px}
|
||||
body{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Inter,sans-serif;color:#000;word-break:break-word;line-height:1.3;font-weight:400;background-color:#fff}
|
||||
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
|
||||
input[type=number]{-moz-appearance:textfield}
|
||||
.container{max-width:768px;width:100%;padding:0 10px;margin:0 auto}
|
||||
.grid{gap:10px}
|
||||
.row-0{margin-right:-10px;margin-left:-10px}
|
||||
.col-0{padding-right:10px;padding-left:10px}
|
||||
.box-w{border-radius:15px;background-color:#fff;padding:12px}
|
||||
.border-none{border:0!important}
|
||||
.box-empty{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:20px;line-height:24px;width:100%;height:358px;color:red;text-align:center}
|
||||
.alert-mess{text-align:center;padding:50px 30px;font-size:20px;font-weight:500;color:red}
|
||||
.static-html{max-height:500px;overflow:hidden;-webkit-transition:.8s;-o-transition:.8s;transition:.8s;position:relative}
|
||||
.static-html.blur:after{content:"";position:absolute;left:0;right:0;bottom:0;height:100px;background:-o-linear-gradient(transparent,#fff);background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(#fff));background:linear-gradient(transparent,#fff)}
|
||||
.color-red{color:red}
|
||||
.color-green{color:#64c800}
|
||||
.color-blue{color:#0079c8}
|
||||
.paging{padding:0 10px 32px;margin-top:56px;text-align:center}
|
||||
.paging-link.active,.paging-link:hover{color:#fff;background:var(--color-secondary);font-weight:500;border-color:var(--color-secondary)}
|
||||
.paging-link{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:8px;border-radius:5px;color:#fff;font-size:16px;line-height:20px;text-decoration:none;background:#fff;text-transform:capitalize;width:34px;height:34px;color:#000}
|
||||
.routing ol{overflow:auto;white-space:nowrap;margin:0;list-style:none}
|
||||
.routing-link{position:relative;font-size:14px;font-weight:400;padding:0 10px;color:#888;text-decoration:none}
|
||||
.routing-link:first-child{padding-left:0}
|
||||
.routing-link:last-child{color:#333;max-width:700px}
|
||||
.routing-link:not(:last-child)::before{content:"";position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%) rotate(25deg);-ms-transform:translateY(-50%) rotate(25deg);transform:translateY(-50%) rotate(25deg);width:1px;height:80%;border-right:1px solid #dfdfdf}
|
||||
.success-form{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background:rgba(0,0,0,.5);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
|
||||
.success-form .cart-success{width:300px;height:250px;background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:fixed;text-align:center}
|
||||
.success-form .success-form-svg{display:block;height:80px;width:80px;color:var(--color-primary)}
|
||||
.success-form .text-cart-success{font-size:20px;font-weight:600;line-height:1.6;padding-top:30px}
|
||||
.header-cart:hover .cart-ttip{display:block}
|
||||
.cart-ttip{display:none;position:absolute;background-color:#fff;border-radius:10px;width:400px;height:auto;right:0;top:40px;z-index:3;-webkit-box-shadow:0 1px 6px rgb(0 0 0 / 25%);box-shadow:0 1px 6px rgb(0 0 0 / 25%)}
|
||||
.cart-ttip .cart-ttip-price-button{border-radius:5px;padding:10px;background:var(--color-primary);text-align:center;margin:0 12px 12px}
|
||||
.cart-ttip .cart-ttip-item-container{max-height:300px;overflow:auto}
|
||||
.cart-ttip .cart-ttip-item-container .compare-item{height:auto;margin:0;max-width:unset;-webkit-box-shadow:none;box-shadow:none}
|
||||
.cart-ttip .cart-ttip .header-null-cart{width:100%!important;text-align:center;padding:30px;color:#000;font-weight:600}
|
||||
.cart-ttip .header-cart-item-price{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:10px}
|
||||
.cart-ttip .cart-ttip-price,.compare-item,.header-nav-menu a{display:-webkit-box;display:-ms-flexbox}
|
||||
.cart-ttip .header-cart-item-price p{font-weight:700;width:auto}
|
||||
.cart-ttip .cart-ttip-price{padding:10px 20px 10px 10px;border-top:3px solid var(--color-primary);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important;gap:6px;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}
|
||||
.cart-ttip .cart-ttip-price p{color:#000;width:auto;padding:0;margin:0}
|
||||
.cart-ttip .cart-ttip-price p:first-child{font-size:15px;font-weight:700;text-transform:uppercase;-webkit-transform:translateY(2px);-ms-transform:translateY(2px);transform:translateY(2px)}
|
||||
.cart-ttip .cart-ttip-price p:nth-child(2){font-size:13px;font-weight:200;color:var(--color-primary);margin-left:0!important}
|
||||
.cart-ttip .cart-ttip-price p:last-child{font-size:15px;font-weight:700}
|
||||
.cart-ttip .compare-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;-webkit-box-shadow:0 1px 8px rgb(0 0 0 / 25%);box-shadow:0 1px 8px rgb(0 0 0 / 25%);padding:10px;border-radius:10px;max-width:360px;background:#fff}
|
||||
.cart-ttip .compare-item img{width:80px;border:5px}
|
||||
.cart-ttip .compare-item .compare-item-text{display:inline-block;padding:0 10px;-webkit-box-flex:1;-ms-flex:1;flex:1}
|
||||
.cart-ttip .compare-item .compare-item-text p{background:0 0;color:#000;padding:0;width:100%;word-break:break-word;font-size:14px;line-height:20px;margin-left:0;height:40px}
|
||||
.cart-ttip .header-null-cart{width:100%;text-align:center;padding:24px;color:#000;font-size:14px;font-weight:600}
|
||||
.static-icons{background-image:url(../images/static-icons-map-pc.png);background-repeat:no-repeat;display:inline-block;background-size:240px 227px}
|
||||
.static-icons-static-icon-category-grid{width:23px;height:20px;background-position:-2px -2px}
|
||||
.static-icons-static-icon-category-list{width:23px;height:20px;background-position:-30px -2px}
|
||||
.static-icons-static-icon-feature-calendar{width:32px;height:32px;background-position:-57px -2px}
|
||||
.static-icons-static-icon-feature-calendar-orange{width:36px;height:36px;background-position:-94.5px -2.5px}
|
||||
.static-icons-static-icon-feature-delivery{width:32px;height:26px;background-position:-135px -2px}
|
||||
.static-icons-static-icon-feature-delivery-orange{width:46px;height:36px;background-position:-2px -33px}
|
||||
.static-icons-static-icon-feature-phone{width:32px;height:32px;background-position:-135px -33px}
|
||||
.static-icons-static-icon-feature-wallet{width:32px;height:31px;background-position:-53px -70px}
|
||||
.static-icons-static-icon-fire{width:21px;height:30px;background-position:-90px -70px}
|
||||
.static-icons-static-icon-header-cart{width:20px;height:20px;background-position:-116px -70px}
|
||||
.static-icons-static-icon-header-cart-pro{width:20px;height:20px;background-position:-141px -70px}
|
||||
.static-icons-static-icon-header-cart-pro-big{width:26px;height:25px;background-position:-2px -95px}
|
||||
.static-icons-static-icon-header-delivery{width:24px;height:20px;background-position:-166px -70px}
|
||||
.static-icons-static-icon-header-phone{width:24px;height:24px;background-position:-116px -95px}
|
||||
.static-icons-static-icon-header-search{width:20px;height:20px;background-position:-145px -95px}
|
||||
.static-icons-static-icon-header-user{width:22px;height:24px;background-position:-33px -120px}
|
||||
.static-icons-static-icon-location{width:13px;height:14px;background-position:-172px -2px}
|
||||
.static-icons-static-icon-phone-ct{width:14px;height:14px;background-position:-172px -21px}
|
||||
.static-icons-static-icon-phone-ct-orange{width:26px;height:28px;background-position:-60px -120px}
|
||||
.static-icons-static-icon-red-gift{width:16px;height:16px;background-position:-53px -40px}
|
||||
.static-icons-static-icon-review-user{width:31px;height:31px;background-position:-145px -120px}
|
||||
.static-icons-static-icon-social-fb{width:42px;height:42px;background-position:-191px -2px}
|
||||
.static-icons-static-icon-social-fb-orange{width:34px;height:34px;background-position:-195.5px -49.5px}
|
||||
.static-icons-static-icon-social-gg-news{width:42px;height:42px;background-position:-195px -88px}
|
||||
.static-icons-static-icon-social-gg-news-orange{width:34px;height:34px;background-position:-91px -135.5px}
|
||||
.static-icons-static-icon-social-instagram{width:42px;height:42px;background-position:-181px -135px}
|
||||
.static-icons-static-icon-social-instagram-orange{width:34px;height:34px;background-position:-2.5px -182.5px}
|
||||
.static-icons-static-icon-social-twitter{width:42px;height:42px;background-position:-41px -182px}
|
||||
.static-icons-static-icon-social-youtube{width:42px;height:42px;background-position:-88px -182px}
|
||||
.static-icons-static-icon-star-orange{width:13px;height:12px;background-position:-75px -50px}
|
||||
.static-icons-static-icon-thunder{width:27px;height:41px;background-position:-135px -182px}
|
||||
@-webkit-keyframes gradient-bg-antimation{
|
||||
0%{background-position:0 0}
|
||||
100%{background-position:-200% 0}
|
||||
}
|
||||
@keyframes gradient-bg-antimation{
|
||||
0%{background-position:0 0}
|
||||
100%{background-position:-200% 0}
|
||||
}
|
||||
.heading-primary .title{font-size:24px;line-height:28px;font-weight:700;padding:16px 0}
|
||||
.heading-primary .offsite-wrapper{width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;line-height:24px;border-bottom:2px solid var(--color-secondary);text-align:right;margin-top:14px}
|
||||
.bottom-primary .view-more{position:relative;display:inline-block;color:var(--color-primary);-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);line-height:20px;margin-right:4px}
|
||||
.bottom-primary .view-more::after{content:"";position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid var(--color-primary)}
|
||||
.global-time-deal{font-size:20px;line-height:30px;gap:4px}
|
||||
.global-time-deal p{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#171717;border-radius:5px;min-width:26px;line-height:36px;padding:0 4px}
|
||||
.p-item .p-image{position:relative;padding-bottom:100%;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:15px}
|
||||
.p-item .p-img{margin:auto 0;bottom:0;right:0;top:0;left:0;position:absolute}
|
||||
.p-item .p-name{display:block;font-size:14px;line-height:18px;font-weight:600;margin:12px 0 8px;height:36px}
|
||||
.p-item .p-price-sale{font-size:18px;line-height:24px;font-weight:700;color:var(--color-primary)}
|
||||
.p-item .p-price-stock{font-size:14px;line-height:24px;font-weight:500;color:#b7b7b7;text-decoration:line-through;height:24px}
|
||||
.p-item .p-summary{font-size:12px;line-height:16px;max-width:150px;-webkit-box-flex:1;-ms-flex:1;flex:1}
|
||||
.p-item .p-cart{width:40px;height:40px;border:1px solid var(--color-primary);border-radius:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
|
||||
.p-cart:hover{background:red}
|
||||
.p-cart:hover i{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}
|
||||
.p-cart:hover span{color:#fff}
|
||||
.p-cart.unavailable:hover{background:grey;border-color:grey}
|
||||
.global-header{-webkit-box-shadow:0 1px 8px rgba(0,0,0,.25);box-shadow:0 1px 8px rgba(0,0,0,.25);position:relative}
|
||||
.global-header .logo{display:block;max-width:125px;margin:0 auto}
|
||||
.global-header .menu img{max-width:20px}
|
||||
.global-header .header-wrapper{height:65px}
|
||||
.global-header .header-wrapper .icon{height:40px;width:40px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:#ebe9eb;border-radius:5px}
|
||||
.global-header .header-cart .header-cart-count{position:absolute;top:-3px;right:-5px;font-size:10px;line-height:9px;background:var(--color-primary);color:#fff;font-weight:600;border-radius:50%;font-style:normal;width:13px;height:13px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
|
||||
.global-header .header-search-bar{max-width:740px;position:relative;height:46px;margin:0 auto}
|
||||
.global-header .header-search-bar input{width:100%;height:46px;border:1px solid #d9d9d9;border-radius:23px;padding-left:20px;outline:0}
|
||||
.global-header .header-search-bar button{background:var(--color-primary);border:1px solid #d9d9d9;border-radius:23px;width:46px;height:46px;position:absolute;top:0;right:0;bottom:0;cursor:pointer}
|
||||
.global-header .header-search-bar .search-results{display:none;border:1px solid #ddd;background:#fff;position:absolute;top:100%;right:0;width:100%;z-index:999;-webkit-box-shadow:0 1px 5px rgb(0 0 0 / 20%);box-shadow:0 1px 5px rgb(0 0 0 / 20%)}
|
||||
.global-header .header-search-bar .search-results-list{max-height:300px;overflow:auto;z-index:999}
|
||||
.global-header .header-search-bar .search-results .item{background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;padding:10px;width:100%;position:relative;text-decoration:none;font-weight:400}
|
||||
.global-header .header-search-bar .search-results .item:hover{background:#f0f2f5}
|
||||
.global-header .header-search-bar .search-results .img{width:60px;height:60px;background:#fff}
|
||||
.global-header .header-search-bar .search-results img{max-width:100%;max-height:100%}
|
||||
.global-header .header-search-bar .search-results .title{font-size:14px;color:#333;-webkit-box-flex:1;-ms-flex:1;flex:1}
|
||||
.global-header .header-search-bar .search-results .price{color:#ec1c24}
|
||||
.global-footer .footer-top .features{border:1px solid #d9d9d9;border-radius:15px}
|
||||
.global-footer .footer-top .features i{height:32px}
|
||||
.global-footer .footer-mid{background-color:#f0f0f0}
|
||||
.global-footer .footer-bottom{padding:20px 0 0}
|
||||
.global-footer .footer-bottom .title{margin:0 -10px;padding:10px;border-top:1px solid rgba(255,255,255,.3)}
|
||||
.global-footer .footer-bottom .list li:not(:last-child){margin-bottom:8px}
|
||||
.global-footer .footer-bottom .list a:hover{color:var(--color-primary)}
|
||||
.global-footer .footer-bottom .ministry-of-industry-and-trade{max-width:140px;margin:20px 0}
|
||||
.global-footer .copy-right{border-top:1px solid rgba(255,255,255,.3)}
|
||||
.global-footer .footer-bottom .accordion-content{max-height:0;-webkit-transition:max-height .3s ease-out;-o-transition:max-height .3s ease-out;transition:max-height .3s ease-out;overflow:hidden}
|
||||
.homepage .swiper-section-hero .swiper-pagination{bottom:-4px}
|
||||
.homepage .swiper-section-hero .swiper-pagination-bullet{width:14px;height:14px;background-color:#d9d9d9;opacity:1}
|
||||
.homepage .swiper-section-hero .swiper-pagination-bullet-active{background-color:var(--color-primary);border-color:transparent}
|
||||
.homepage .swiper-section-hero .wrapper-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
|
||||
.homepage .swiper-section-hero .wrapper-content .title{font-size:20px;line-height:24px;font-weight:600;max-width:484px;margin:0 auto}
|
||||
.homepage .swiper-section-hero .wrapper-content .text{font-size:14px;line-height:18px;max-width:666px;margin:12px auto 0}
|
||||
.homepage .section-brand{border-radius:15px}
|
||||
.homepage .section-brand .swiper{margin:0 12px;padding:20px 0}
|
||||
.homepage .section-deal .heading-deal{background-color:var(--color-primary);border-radius:15px;padding:10px 16px;color:#fff;margin-bottom:20px}
|
||||
.homepage .section-deal .heading-deal .wrapper-title{font-size:28px;line-height:32px;font-weight:900}
|
||||
.homepage .section-deal .product-deal .wrapper-deal{height:20px;width:100%}
|
||||
.homepage .section-deal .product-deal .wrapper-deal .deal-line{position:absolute;top:0;left:0;bottom:0;width:100%;border-radius:10px;background:-o-linear-gradient(right,#ffb800 0,#ff7a30 100%);background:-webkit-gradient(linear,right top,left top,color-stop(0,#ffb800),to(#ff7a30));background:linear-gradient(270deg,#ffb800 0,#ff7a30 100%)}
|
||||
.homepage .section-deal .product-deal .wrapper-deal .deal-line.total{opacity:.3}
|
||||
.homepage .section-deal .product-deal .wrapper-deal .deal-line.remaining{background:-o-repeating-linear-gradient(left,#ffb800 0,#ff7a30 50%,#ffb800 100%);background:repeating-linear-gradient(to right,#ffb800 0,#ff7a30 50%,#ffb800 100%);background-size:200% auto;background-position:0 100%;-webkit-animation:2s linear infinite forwards gradient-bg-antimation;animation:2s linear infinite forwards gradient-bg-antimation}
|
||||
.homepage .section-deal .product-deal .wrapper-deal .static-icons{position:absolute;bottom:2px;left:0}
|
||||
.homepage .section-deal .product-deal .wrapper-deal .sold{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
|
||||
.homepage .section-deal .product-deal .p-deal-featured .p-cart{height:50px;border:1px solid var(--color-primary);border-radius:10px}
|
||||
.homepage .section-deal .product-deal .p-deal-featured .p-image{border-radius:25px;border:4px solid var(--color-primary);overflow:hidden}
|
||||
.homepage .section-deal .product-deal .p-deal-other .p-image{max-width:124px;width:100%;padding-bottom:0;border-radius:8px}
|
||||
.homepage .section-deal .product-deal .p-deal-other .swiper-wrapper{max-height:438px;-ms-flex-wrap:wrap;flex-wrap:wrap}
|
||||
.homepage .section-deal .banner-deal-image{position:relative;border-radius:15px;overflow:hidden;display:block}
|
||||
.homepage .section-deal .banner-deal-image .overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5)}
|
||||
.homepage .section-deal .banner-deal-image .wrapper-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff;max-width:335px;width:100%;text-align:center}
|
||||
.homepage .section-deal .banner-deal-image .wrapper-content .title{font-size:36px;line-height:44px;font-weight:600px}
|
||||
.homepage .section-deal .banner-deal-image .wrapper-content .btn{padding:13px 33px;width:-webkit-max-content;width:-moz-max-content;width:max-content;margin:0 auto;border-radius:10px}
|
||||
.homepage .section-category .category-child{border-bottom:1px solid #d9d9d9}
|
||||
.homepage .section-category .category-child .list{gap:20px;overflow:auto;white-space:nowrap;padding-bottom:1px}
|
||||
.homepage .section-category .category-child .item{position:relative;cursor:pointer;padding-bottom:10px;-webkit-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}
|
||||
.homepage .section-category .category-child .item.selected{color:var(--color-primary)}
|
||||
.homepage .section-category .category-child .item.selected::after{content:"";position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid var(--color-primary)}
|
||||
.homepage .section-customer .customer-product-review{border-top:1px solid var(--color-primary)}
|
||||
.homepage .section-customer .customer-product-image{border-radius:15px}
|
||||
.product-page .banner .overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.3);font-size:18px;line-height:22px;font-weight:700;text-transform:uppercase;color:#fff;text-align:center}
|
||||
.product-page .sort{border-bottom:1px solid #f0f0f0}
|
||||
.product-page .sort .sort-by-display .static-icons.active,.product-page .sort .sort-by-display .static-icons:hover{-webkit-filter:invert(50%) sepia(100%) saturate(4265%) hue-rotate(0deg) brightness(100%) contrast(100%);filter:invert(50%) sepia(100%) saturate(4265%) hue-rotate(0deg) brightness(100%) contrast(100%)}
|
||||
.product-page .sort .sort-by-collection select{height:36px;border-radius:8px;background-color:#f0f0f0;outline:0;border:0;padding:4px}
|
||||
.product-page .filter-popup .filter-popup-btn{width:36px;height:36px;background:#000;border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
|
||||
.product-page .filter-popup .filter-popup-btn .icon{max-width:16px}
|
||||
.product-page .popup-filter-group{background:rgba(0,0,0,.3);z-index:10000;position:fixed;top:0;left:0;right:0;bottom:0;display:none}
|
||||
.product-page .popup-filter-group .main-content{height:100%;width:85%;position:absolute;top:0;right:0;bottom:0;background:#fff}
|
||||
.product-page .popup-filter-group .item .list-holder{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
|
||||
.product-page .popup-filter-group .item .list-holder .current{color:var(--color-primary)}
|
||||
.product-page .popup-filter-group .popup-header{padding:12px 10px;-webkit-box-shadow:0 0 6px 1px #ebebeb;box-shadow:0 0 6px 1px #ebebeb}
|
||||
.product-page .popup-filter-group .popup-footer{padding:8px 10px;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center;-webkit-box-shadow:0 -1px 6px 1px #ebebeb;box-shadow:0 -1px 6px 1px #ebebeb;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}
|
||||
.product-page .popup-filter-group .brand-item a{-webkit-box-align:center;display:-webkit-box;display:-ms-flexbox}
|
||||
.product-page .popup-filter-group .popup-footer a{font-size:14px;padding:0 5px;color:var(--color-primary);line-height:36px;border-radius:5px;margin-left:5px;border:1px solid var(--color-primary);font-weight:600}
|
||||
.product-page .popup-filter-group .brand-item .current,.product-page .popup-filter-group .popup-footer a:last-child{background:var(--color-primary);color:#fff}
|
||||
.product-page .popup-filter-group .popup-body{height:calc(100% - 55px);overflow:auto;padding:12px 10px}
|
||||
.product-page .popup-filter-group .btn-close-menu{display:inline-block;text-align:center;border:1px solid red!important;border-radius:5px;width:84px;line-height:34px;color:#fff!important;background:red!important}
|
||||
.product-page .popup-filter-group .item{margin-top:30px}
|
||||
.product-page .popup-filter-group .item .list-holder a{display:block;width:49%;color:#4a90e2;margin-bottom:10px}
|
||||
.product-page .popup-filter-group .item .list-holder .icon-square{color:#555;margin:0 5px -2px 0;display:inline-block;width:11px;height:11px;border:1px solid #666;border-radius:3px;position:relative}
|
||||
.product-page .popup-filter-group .list-holder .current .icon-square{border-color:var(--color-primary)}
|
||||
.product-page .popup-filter-group .list-holder .current .icon-square::before{content:"\f00c";font-family:FontAwesome;font-style:normal;line-height:1;font-size:11px;position:absolute;top:0;color:var(--color-primary)}
|
||||
.product-page .popup-filter-group .brand-item .title,.product-page .popup-filter-group .item .title{font-weight:700;margin-bottom:10px;text-transform:uppercase;font-size:15px}
|
||||
.product-page .popup-filter-group .brand-item a{-ms-flex-align:center;-webkit-box-align:center;align-items:center;border:1px solid #e0e0e0;border-radius:4px;color:#333;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:14px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:40px}
|
||||
.product-page .popup-filter-group .brand-item a img{max-height:30px}
|
||||
.product-page .popup-filter-group .list-holder{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}
|
||||
.product-page .popup-filter-group .brand-item .list-holder{display:-ms-grid;display:grid;grid-auto-rows:minmax(-webkit-min-content,-webkit-max-content);grid-auto-rows:minmax(min-content,max-content);-ms-grid-columns:(minmax(0,1fr))[2];grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:6px;margin-bottom:10px;max-height:133px;overflow:hidden}
|
||||
.product-page .popup-filter-group label{width:50%;color:#4a90e2;margin-bottom:10px}
|
||||
.product-page .popup-filter-group label input{margin:0 5px}
|
||||
.product-page .popup-filter-group .btn-view-more-popup{font-size:14px;color:var(--color-secondary);padding:4px 0;display:block;margin:0 auto}
|
||||
.product-page .product-list.list-style{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}
|
||||
.product-page .product-list.list-style .p-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}
|
||||
.product-page .product-list.list-style .p-picture{max-width:160px;width:100%}
|
||||
.product-detail-page .gray-line{width:100%;height:1px;border-bottom:1px solid #e1e1e1}
|
||||
.product-detail-page .gallery-thumbs .swiper-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box}
|
||||
.product-detail-page .gallery-thumbs .swiper-slide{opacity:.5}
|
||||
.product-detail-page .gallery-thumbs .swiper-slide-thumb-active{opacity:1;border:1px solid var(--color-primary);border-radius:5px;overflow:hidden}
|
||||
.product-detail-page .section-product .pro-name{font-size:24px;line-height:30px;font-weight:600;margin-bottom:8px}
|
||||
.product-detail-page .section-product .pro-sub-title{line-height:26px}
|
||||
.product-detail-page .section-product .pro-price .title{font-size:14px;line-height:17px;font-weight:700;display:inline-block;width:90px}
|
||||
.product-detail-page .section-product .pro-price .heading-deal{margin:0 auto 20px}
|
||||
.product-detail-page .section-product .pro-status .pro-status-item{padding:8px 12px;background:#f0f0f0;border-radius:8px;display:inline-block}
|
||||
.product-detail-page .section-product .pro-gift .title{font-size:16px;line-height:26px;font-weight:700;color:var(--color-primary)}
|
||||
.product-detail-page .section-product .pro-gift .list{position:relative;padding:12px;background:#f0f0f0;border-radius:15px}
|
||||
.product-detail-page .section-product .pro-gift .list::after{position:absolute;content:"";top:-12px;left:60px;width:20px;height:12px;-webkit-clip-path:polygon(50% 0%,0 100%,100% 100%);clip-path:polygon(50% 0%,0 100%,100% 100%);background:#f0f0f0}
|
||||
.product-detail-page .section-product .pro-gift .list .item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;margin-bottom:4px}
|
||||
.product-detail-page .section-product .pro-gift .list .marker{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:var(--color-primary);font-size:12px;line-height:12px;font-weight:700;color:#fff}
|
||||
.product-detail-page .section-product .pro-cart .pro-cart-quantity{max-width:60px;width:100%;height:50px;background:#f0f0f0;border-radius:5px;outline:0;border:0;padding:12px 18px;font-size:16px;font-weight:700;text-align:center}
|
||||
.product-detail-page .section-product .pro-cart .pro-cart-btn{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-width:245px;width:100%;height:50px;border-radius:25px;border:1px solid var(--color-primary);font-size:15px;line-height:20px;font-weight:700;text-transform:uppercase}
|
||||
.product-detail-page .section-review .review-form{display:none;padding:20px 12px;border:1px solid #e1e1e1;border-radius:15px}
|
||||
.product-detail-page .section-review .review-form .review-form-item{margin-bottom:20px}
|
||||
.product-detail-page .section-review .review-form .review-form-item .r-input{background:#fff;border:1px solid #d9d9d9;border-radius:10px;height:42px;width:100%;font-size:14px;line-height:18px;padding:10px;outline-color:#d7d7d7}
|
||||
.product-detail-page .section-review .review-form .review-form-item textarea.r-input{height:106px;resize:none;margin-bottom:-4px}
|
||||
.product-detail-page .section-review .review-form .review-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:212px;height:42px;background:#1f1f1f;border-radius:10px;font-size:16px;font-weight:700;text-transform:uppercase;color:#fff}
|
||||
.product-detail-page .icon-star{background-image:url("../images/star_sprite.png");width:96px;height:19px;vertical-align:text-bottom;display:inline-block;background-repeat:no-repeat}
|
||||
.product-detail-page .icon-star.star0{background-position:3px -108px!important}
|
||||
.product-detail-page .icon-star.star1{background-position:3px -87px!important}
|
||||
.product-detail-page .icon-star.star2{background-position:3px -65px!important}
|
||||
.product-detail-page .icon-star.star3{background-position:3px -42px!important}
|
||||
.product-detail-page .icon-star.star4{background-position:3px -21px!important}
|
||||
.product-detail-page .icon-star.star5{background-position:3px 1px!important}
|
||||
.product-detail-page .box-review-list .review-item{width:100%;padding:10px 0}
|
||||
.product-detail-page .box-review-list .review-item .avatar{width:36px;height:36px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#ccc;border-radius:5px;font-weight:700}
|
||||
.product-detail-page .box-review-list .review-item .avatar-name{width:12px;overflow:hidden;white-space:nowrap;font-size:16px;font-weight:700;text-transform:uppercase}
|
||||
.product-detail-page .box-review-list .review-item .content span.star-rate-review{margin-right:15px}
|
||||
.product-detail-page .box-review-list .review-item.review-vm{display:none}
|
||||
.product-detail-page .box-review-list .review-item.review-vm a{width:150px;line-height:28px;border:solid 1px #e31212;border-radius:3px;color:#e31212;font-weight:300;font-size:12px;text-align:center}
|
||||
.product-detail-page .box-review-list .review-item-reply{background:#f0f0f0;padding:10px;border-radius:10px;margin-top:10px;position:relative}
|
||||
.product-detail-page .box-review-list .review-item-reply::after{content:"";position:absolute;top:-10px;left:15px;width:15px;height:10px;background:#f0f0f0;-webkit-clip-path:polygon(50% 0%,0% 100%,100% 100%);clip-path:polygon(50% 0%,0% 100%,100% 100%)}
|
||||
.product-detail-page .global-time-deal{font-size:18px}
|
||||
.product-detail-page .global-time-deal p{min-width:20px;line-height:32px}
|
||||
.detail-spec-content table{width:100%;border-collapse:collapse}
|
||||
.detail-spec-content table tr:nth-child(odd){background:#f0f0f0}
|
||||
.detail-spec-content table td:nth-child(odd),.detail-spec-content table th:nth-child(odd){font-weight:700;width:30%}
|
||||
.detail-spec-content table td,.detail-spec-content table th{padding:10px;text-align:left}
|
||||
.detail-spec-content table ul{list-style:none}
|
||||
.rating-input{float:right;width:16px;height:16px;padding:0;margin:0 0 0 -16px;opacity:0}
|
||||
.rating-star:hover{background-position:0 0}
|
||||
.rating-star{position:relative;float:right;display:block;width:17px;height:17px;background:url("../images/star_rating_2022.png") 0 0;margin:0 3px}
|
||||
.rating-star:hover,.rating-star:hover~.rating-star{background-position:0 0}
|
||||
.rating-input:checked~.rating-star,.rating-star:hover,.rating-star:hover~.rating-star{background-position:0 0}
|
||||
.rating-input:checked~.rating-star,.rating:hover .rating-star:hover,.rating:hover .rating-star:hover~.rating-star{background-position:0 0}
|
||||
.rating-comment:hover .rating-star,.rating-star{position:relative;float:right;display:block;background:url("../images/star_rating_2022.png?v=2.1") 0 -28px}
|
||||
.rating-comment:hover .rating-star:hover,.rating-comment:hover .rating-star:hover~.rating-star{background-position:0 -56px!important}
|
||||
#star_tip{display:none;margin-left:10px;position:relative;background:#e20505;color:#fff;padding:2px 8px 3px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:3px}
|
||||
#star_tip:after{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(82,184,88,0);border-right-color:#e20505;border-width:6px;margin-top:-6px}
|
||||
.cart-page .cart-box .heading .cart-icon{height:20px}
|
||||
.cart-page .cart-box .content{border:1px solid #e1e1e1;padding:12px}
|
||||
.cart-page .cart-box .content .input-w{width:100%;padding:10px;font-size:14px;border:1px solid #d9d9d9;border-radius:5px;outline-color:#b7b7b7;margin-bottom:10px}
|
||||
.cart-page .cart-box .content textarea.input-w{max-height:132px;resize:none;margin-bottom:-4px}
|
||||
.cart-page .cart-box .list-radio .item:not(:last-child){margin-bottom:16px}
|
||||
.cart-page .cart-box .list-radio .item label{position:relative}
|
||||
.cart-page .cart-box .list-radio .item label:before{content:"";display:inline-block;position:relative;top:0;margin:0 5px 0 0;width:13px;height:13px;border-radius:11px;border:1px solid var(--color-primary);background-color:transparent}
|
||||
.cart-page .cart-box .list-radio .item input[type=radio]:checked+label:after{border-radius:11px;width:8px;height:8px;position:absolute;top:3px;left:2.5px;content:" ";display:block;background:var(--color-primary)}
|
||||
.cart-page .cart-box.cart-container{border:2px solid #ff5c00;border-radius:15px}
|
||||
.cart-page .cart-box.cart-container .heading{border-bottom:1px solid #d9d9d9}
|
||||
.cart-page .cart-box.cart-container .cart-voucher{border-bottom:1px solid #d9d9d9}
|
||||
.cart-page .c-item{padding:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:26px;font-size:14px;line-height:18px}
|
||||
.cart-page .c-item .c-deal-tag{max-width:40px;position:absolute;top:0;left:-10px}
|
||||
.cart-page .c-item .c-img{max-width:92px;border:1px solid #e1e1e1}
|
||||
.cart-page .c-item .c-delete{display:block;color:#8d8d8d;font-weight:300;text-align:center;margin-top:16px}
|
||||
.cart-page .c-item .c-name{font-size:14px;line-height:18px;font-weight:400;margin-bottom:8px}
|
||||
.cart-page .c-item .c-price{font-weight:700;font-size:15px;line-height:24px;color:#ff5c00;margin-bottom:4px}
|
||||
.cart-page .c-item .c-quantity{width:50px;height:36px;border:1px solid #999;border-radius:5px;padding:10px;outline:0;font-weight:700;text-align:center}
|
||||
.cart-page .cart-btn{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;width:100%;height:42px;background:#ff5c00;border-radius:5px;font-size:16px;text-transform:uppercase;font-weight:500;border:0;cursor:pointer}
|
||||
.cart-page .cart-voucher .cart-btn{max-width:92px;font-size:14px;text-transform:capitalize}
|
||||
.cart-page .cart-voucher .cart-voucher-input{border:1px solid #d9d9d9;border-radius:5px;padding:12px 10px;outline-color:#b7b7b7;width:100%}
|
||||
.cart-page .cart-voucher-group .btn-check-voucher{color:#fff!important;position:absolute;-webkit-box-align:center;display:-webkit-box;display:-ms-flexbox;top:0;right:0;bottom:0}
|
||||
.modal-global{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);overflow:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:9999;padding:10px}
|
||||
.modal-global .contact-box{position:relative;padding:20px 0;border-radius:20px;background-color:#fff;max-width:594px;width:100%}
|
||||
.modal-global .contact-box .btn-close{position:absolute;top:-20px;right:-10px;width:40px;height:40px;background:#000;-webkit-box-shadow:0 1px 8px rgba(0,0,0,.25);box-shadow:0 1px 8px rgba(0,0,0,.25);border-radius:50%;border:4px solid #fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer}
|
||||
.modal-global .contact-form .form-title{border-bottom:1px solid #eee}
|
||||
.modal-global .contact-form .form-input{display:block;width:100%;background:#fff;border:1px solid #dadada;border-radius:8px;height:42px;padding:0 18px;outline-color:var(--color-primary)}
|
||||
.modal-global .contact-form .form-input:not(:last-child){margin-bottom:12px}
|
||||
.modal-global .contact-form .form-btn{width:100%;height:40px;border-radius:8px}
|
||||
.scroll-top-btn{display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:22px;width:50px;height:50px;position:fixed;bottom:40px;right:10px;background:var(--color-primary);border-radius:50%;z-index:999;-webkit-box-shadow:0 1px 5px rgb(0 0 0 / 20%);box-shadow:0 1px 5px rgb(0 0 0 / 20%);color:#fff}
|
||||
@media (min-width:768px){
|
||||
.col-md-6{-ms-flex:0 0 50%;-webkit-box-flex:0;flex:0 0 50%;max-width:50%}
|
||||
#js-list-deal{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);gap:10px}
|
||||
.category-page .product-list{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
BIN
demo-audio-2/images/audio-logo-demo-2.png
Normal file
BIN
demo-audio-2/images/audio-logo-demo-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
BIN
demo-audio-2/images/favicon_audio.png
Normal file
BIN
demo-audio-2/images/favicon_audio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
demo-audio-2/images/static-icon-cart-card.png
Normal file
BIN
demo-audio-2/images/static-icon-cart-card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 620 B |
BIN
demo-audio-2/images/static-icon-cart-deal.png
Normal file
BIN
demo-audio-2/images/static-icon-cart-deal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
demo-audio-2/images/static-icon-cart-location.png
Normal file
BIN
demo-audio-2/images/static-icon-cart-location.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 740 B |
BIN
demo-audio-2/images/static-icon-cart-truck.png
Normal file
BIN
demo-audio-2/images/static-icon-cart-truck.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 951 B |
BIN
demo-audio-2/images/static-icon-filter.png
Normal file
BIN
demo-audio-2/images/static-icon-filter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 399 B |
BIN
demo-audio-2/images/static-icon-menu.png
Normal file
BIN
demo-audio-2/images/static-icon-menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 B |
@@ -5,17 +5,14 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="shortcut icon" href="/images/favicon_audio.png" type="image/x-icon" />
|
||||
<title>DEMO AUDIO 2</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
|
||||
rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/css/library.css">
|
||||
<link rel="stylesheet" href="/css/style_pc.css">
|
||||
|
||||
@@ -23,7 +20,7 @@
|
||||
|
||||
<body>
|
||||
<!-- HEADER -->
|
||||
<header class="header">
|
||||
<header class="global-header">
|
||||
<!-- HEADER TOP -->
|
||||
<div class="header-top bg-secondary">
|
||||
<div class="container">
|
||||
@@ -58,7 +55,7 @@
|
||||
<div class="row align-items-center">
|
||||
<div class="col-2">
|
||||
<a href="/" class="logo">
|
||||
<img src="/images/audio-logo.png" alt="Logo" class="d-flex w-100">
|
||||
<img src="/images/audio-logo-demo-2.png" alt="Logo" class="d-flex w-100">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-9 category">
|
||||
@@ -126,28 +123,8 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- BREADCRUMB -->
|
||||
<section class="section-breadcrumb routing py-12px">
|
||||
<div class="global-breadcrumb container">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list-style-none d-flex">
|
||||
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||||
<a href="/" itemprop="item" class="nopad-l">
|
||||
<span itemprop="name">Trang chủ</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||||
<a href="/linh-kien-may-tinh" itemprop="item" class="nopad-l">
|
||||
<span itemprop="name"> Linh kiện máy tính </span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HOMEPAGE -->
|
||||
<div class="homepage d-none">
|
||||
<div class="homepage">
|
||||
<!-- SECTION HERO -->
|
||||
<div class="section-hero">
|
||||
<div class="swiper swiper-section-hero">
|
||||
@@ -556,8 +533,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BREADCRUMB -->
|
||||
<section class="section-breadcrumb routing py-12px">
|
||||
<div class="global-breadcrumb container">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list-style-none d-flex">
|
||||
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||||
<a href="/" itemprop="item" class="nopad-l">
|
||||
<span itemprop="name">Trang chủ</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||||
<a href="/linh-kien-may-tinh" itemprop="item" class="nopad-l">
|
||||
<span itemprop="name"> Linh kiện máy tính </span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CATEGORY PAGE -->
|
||||
<div class="category-page d-none">
|
||||
<div class="product-page d-none">
|
||||
<div class="container">
|
||||
<!-- BANNER -->
|
||||
<div class="banner p-relative mb-3">
|
||||
@@ -702,7 +699,7 @@
|
||||
</div>
|
||||
|
||||
<!-- DETAIL PAGE -->
|
||||
<div class="detail-page">
|
||||
<div class="product-detail-page d-none">
|
||||
<div class="container">
|
||||
<!-- SECTION PRODUCT -->
|
||||
<div class="section-product row">
|
||||
@@ -804,8 +801,8 @@
|
||||
<!-- -->
|
||||
<div class="pro-cart d-flex align-items-center justify-content-between my-3">
|
||||
<input type="number" name="product quantity" class="pro-cart-quantity" value="1" min="1">
|
||||
<a href="" class="pro-cart-btn bg-primary color-white">Mua ngay</a>
|
||||
<a href="" class="pro-cart-btn color-primary">
|
||||
<a href="javascript:;" class="pro-cart-btn bg-primary color-white">Mua ngay</a>
|
||||
<a href="javascript:;" class="pro-cart-btn color-primary" onclick="toggleModal('#js-modal-ct')">
|
||||
<i class="static-icons static-icons-static-icon-phone-ct-orange mr-2"></i>
|
||||
Liên hệ ngay
|
||||
</a>
|
||||
@@ -1051,11 +1048,285 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DEATAIL CONTACT POPUP -->
|
||||
<div class="modal-global modal-player d-none" id="js-modal-ct">
|
||||
<div class="contact-box game-policy">
|
||||
<!-- PLAYER -->
|
||||
<div class="contact-form" id="play-game-inside">
|
||||
<div action="" class="form play-container">
|
||||
<h4 class="form-title text-16 font-weight-700 text-uppercase color-secondary pb-12px mb-3 text-center">
|
||||
Thông tin khách hàng</h4>
|
||||
|
||||
<div class="form-list px-3" id="js-user-info">
|
||||
<input type="email" placeholder="Email*" id="js-ct-email" class="form-input" value="">
|
||||
<input type="text" placeholder="Họ tên*" id="js-ct-name" class="form-input" value="">
|
||||
<input type="text" placeholder="Số điện thoại*" id="js-ct-tel" class="form-input" value="">
|
||||
|
||||
<p class="text-13 text-center my-3">
|
||||
Liên hệ ngay
|
||||
<a href="tel:0828826688" class="font-weight-600 color-primary">0828826688</a>
|
||||
hoặc
|
||||
<a href="tel:0828826688" class="font-weight-600 color-primary">0828826688</a>
|
||||
để được tư vấn
|
||||
</p>
|
||||
<a href="javascript:;" type="submit"
|
||||
class="form-btn bg-primary d-flex align-items-center justify-content-center color-white text-uppercase font-weight-600"
|
||||
onclick="_submitContact()">Nhận báo giá tốt nhất hôm nay</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn-close" onclick="toggleModal('#js-modal-ct')">
|
||||
<span class="text-24 font-weight-500 color-white">X</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DEAL PAGE -->
|
||||
<div class="deal-page d-none">
|
||||
<div class="container homepage">
|
||||
<!-- SECTION DEAL -->
|
||||
<div class="section-deal mt-12px">
|
||||
<!-- HEADING -->
|
||||
<div class="heading-deal row align-items-center justify-content-center gap-24">
|
||||
<div class="">
|
||||
<div class="wrapper-title d-flex align-items-center gap-8">
|
||||
<i class="title">Flash Sale</i>
|
||||
<i class="static-icons static-icons-static-icon-thunder"></i>
|
||||
<i class="time">15.02</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-8">
|
||||
<span>Kết thúc trong</span>
|
||||
<div class="global-time-deal d-flex align-items-center font-weight-700 color-white">
|
||||
<p>9</p>
|
||||
<p>9</p>
|
||||
<span>:</span>
|
||||
<p>9</p>
|
||||
<p>9</p>
|
||||
<span>:</span>
|
||||
<p>9</p>
|
||||
<p>9</p>
|
||||
<span>:</span>
|
||||
<p>9</p>
|
||||
<p>9</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PRODUCT -->
|
||||
<div class="product-deal p-deal-other grid grid--4-cols">
|
||||
<div class="p-item">
|
||||
<a href="" class="p-image">
|
||||
<img src="/images/static-image-pro-1.png" alt="Product" class="p-img d-flex w-100">
|
||||
</a>
|
||||
<a href="">
|
||||
<h3 class="p-name">Lorem ipsum is placeholder text commonly used</h3>
|
||||
</a>
|
||||
<div class="p-price d-flex">
|
||||
<div class="p-price-sale">72.880.000₫</div>
|
||||
<div class="p-price-stock">82.880.000₫</div>
|
||||
</div>
|
||||
<div class="p-wrapper d-flex align-items-center justify-content-between mt-2">
|
||||
<div class="p-summary">
|
||||
<span class="ws-pre-line">+ Giá tốt nhất khi liên hệ ngay
|
||||
+ Hỗ trợ kỹ thuật 24/7
|
||||
+ Bảo hành chính hãng</span>
|
||||
</div>
|
||||
<a href="javascript:;" class="p-cart">
|
||||
<i class="static-icons static-icons-static-icon-header-cart-pro"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="wrapper-deal p-relative mt-4">
|
||||
<div class="deal-line total"></div>
|
||||
<div class="deal-line remaining"></div>
|
||||
<i class="static-icons static-icons-static-icon-fire"></i>
|
||||
<p class="sold text-12 color-white">Đã bán 30</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CART PAGE -->
|
||||
<div class="cart-page d-none">
|
||||
<div class="container">
|
||||
<form class="row">
|
||||
<div class="col-4">
|
||||
<div class="cart-box customer-info">
|
||||
<div class="heading bg-primary color-white d-flex gap-12 p-12px">
|
||||
<img src="/images/static-icon-cart-location.png" alt="icon cart" class="cart-icon d-flex">
|
||||
<h2 class="text-16 text-uppercase font-weight-700">Thông tin giao hàng</h2>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p class="text-13 mb-12px">
|
||||
Để tiếp tục đặt hàng, quý khách xin vui lòng
|
||||
<a href="/taikhoan" class="color-primary text-under-line">Đăng nhập</a>
|
||||
hoặc nhập thông tin bên dưới
|
||||
</p>
|
||||
|
||||
<input type="text" name="" id="" class="input-w" placeholder="Họ và tên">
|
||||
<input type="text" name="" id="" class="input-w" placeholder="Email">
|
||||
<input type="text" name="" id="" class="input-w" placeholder="Số điện thoại">
|
||||
<div class="d-flex gap-12">
|
||||
<select name="" id="" class="input-w">
|
||||
<option value="">Chọn Tỉnh thành</option>
|
||||
</select>
|
||||
<select name="" id="" class="input-w">
|
||||
<option value="">Chọn Quận/ Huyện</option>
|
||||
</select>
|
||||
</div>
|
||||
<input type="text" name="" id="" class="input-w" placeholder="Địa chỉ">
|
||||
<textarea name="" id="" cols="30" rows="10" class="input-w" placeholder="Ghi chú"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="cart-box payment mb-12px">
|
||||
<div class="heading bg-primary color-white d-flex gap-12 p-12px">
|
||||
<img src="/images/static-icon-cart-card.png" alt="icon cart" class="cart-icon d-flex">
|
||||
<h2 class="text-16 text-uppercase font-weight-700">Phương thức thanh toán</h2>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<ul class="list list-radio">
|
||||
<li class="item">
|
||||
<input class="d-none" type="radio" id="check-payment-1" name="payment" checked>
|
||||
<label for="check-payment-1">Thanh toán tiền mặt khi nhận hàng (tiền mặt/quẹt thẻ
|
||||
ATM,Visa,Master)</label>
|
||||
</li>
|
||||
<li class="item">
|
||||
<input class="d-none" type="radio" id="check-payment-2" name="payment">
|
||||
<label for="check-payment-2">Thanh toán qua chuyển khoản qua tài khoản ngân hàng(khuyên dùng)</label>
|
||||
</li>
|
||||
<li class="item">
|
||||
<input class="d-none" type="radio" id="check-payment-3" name="payment">
|
||||
<label for="check-payment-3">Thanh toán qua Ngân Lượng (ATM nội địa, Visa,Master)</label>
|
||||
</li>
|
||||
<li class="item">
|
||||
<input class="d-none" type="radio" id="check-payment-4" name="payment">
|
||||
<label for="check-payment-4">Trả góp Alepay (Ngân Lượng)</label>
|
||||
</li>
|
||||
<li class="item">
|
||||
<input class="d-none" type="radio" id="check-payment-5" name="payment">
|
||||
<label for="check-payment-5">Thanh toán trực tuyến (Bằng thẻ ATM/Visa/Master qua cổng VnPay)</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cart-box delivery">
|
||||
<div class="heading bg-primary color-white d-flex gap-12 p-12px">
|
||||
<img src="/images/static-icon-cart-truck.png" alt="icon cart" class="cart-icon d-flex">
|
||||
<h2 class="text-16 text-uppercase font-weight-700">Phương thức vận chuyển</h2>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<ul class="list list-radio">
|
||||
<li class="item">
|
||||
<input class="d-none" type="radio" id="check-delivery-1" name="delivery" checked>
|
||||
<label for="check-delivery-1">Giao hàng trong 48h: 0đ</label>
|
||||
</li>
|
||||
<li class="item">
|
||||
<input class="d-none" type="radio" id="check-delivery-2" name="delivery">
|
||||
<label for="check-delivery-2">[NowFree] Giao hàng nhanh trong 2 giờ: 9,000 đ Đơn hàng không đủ điều
|
||||
kiện giao nhanh 2 giờ (xem
|
||||
thêm)
|
||||
</label>
|
||||
</li>
|
||||
<li class="item">
|
||||
<input class="d-none" type="radio" id="check-delivery-3" name="delivery">
|
||||
<label for="check-delivery-3">[Nhanh] Nhận hàng vào 11 Th03 - 17 Th03: 16,000 đ</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="cart-box cart-container mb-12px">
|
||||
<div class="heading d-flex align-items-center gap-12 p-12px">
|
||||
<h2 class="text-16 text-uppercase font-weight-700">Giỏ hàng</h2>
|
||||
<span>1 sản phẩm</span>
|
||||
</div>
|
||||
|
||||
<div class="content-w">
|
||||
<!-- CART LIST -->
|
||||
<div class="cart-list">
|
||||
<div class="c-item">
|
||||
<div class="c-left">
|
||||
<img src="/images/static-image-pro-1.png" alt="cart-item" class="c-img d-flex w-100"
|
||||
class="d-flex w-100">
|
||||
<a href="javascript:;" class="c-delete">Xóa</a>
|
||||
</div>
|
||||
<div class="c-right flex-1">
|
||||
<h3 class="c-name line-clamp-2">Loa đứng Loa Cột Floor Standing Hi-end</h3>
|
||||
<p class="c-price">72.880.000₫</p>
|
||||
<p class="d-flex align-items-center gap-12">
|
||||
<span>Số lượng</span>
|
||||
<input class="c-quantity" type="number" value="1" min="1">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CART VOUCHER -->
|
||||
<div class="cart-voucher d-flex gap-8 pb-3 px-12px">
|
||||
<input class="cart-voucher-input" type="text" name="" id="" placeholder="Nhập mã ưu đãi">
|
||||
<a class="cart-btn">Áp dụng</a>
|
||||
</div>
|
||||
|
||||
<!-- CART SEND -->
|
||||
<div class="cart-send p-12px text-14">
|
||||
<div class="d-flex align-items-center justify-content-between pb-3">
|
||||
<p>Phí vận chuyển:</p>
|
||||
<p>Miễn phí</p>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between pb-3 font-weight-700">
|
||||
<p>Tổng tiền:</p>
|
||||
<p>72.880.000₫</p>
|
||||
</div>
|
||||
|
||||
<a class="cart-btn">Hoàn tất đơn hàng</a>
|
||||
<a href="/" class="d-block text-16 text-center font-weight-500 color-primary pt-3 pb-2">Tiếp tục mua
|
||||
sắm</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SCROLL TOP -->
|
||||
<a href="javascript:window.scrollTo({ top: 0, behavior: 'smooth' });" class="scroll-top-btn"
|
||||
title="Di chuyển lên đầu trang!" style="display: flex">
|
||||
<i class="fa fa-arrow-up" aria-hidden="true"></i>
|
||||
</a>
|
||||
|
||||
<!--SUCCESS -->
|
||||
<div class="success-form hide">
|
||||
<div class="cart-success">
|
||||
<svg class="success-form-svg" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path class="circle"
|
||||
d="M13 1C6.372583 1 1 6.372583 1 13s5.372583 12 12 12 12-5.372583 12-12S19.627417 1 13 1z" />
|
||||
<path class="tick" d="M6.5 13.5L10 17 l8.808621-8.308621" />
|
||||
</g>
|
||||
</svg>
|
||||
<p class="text-cart-success">
|
||||
Thêm sản phẩm vào giỏ hàng thành công!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer mt-4">
|
||||
<footer class="global-footer mt-4">
|
||||
<!-- FOOTER TOP -->
|
||||
<div class="footer-top">
|
||||
<div class="container">
|
||||
@@ -1106,7 +1377,7 @@
|
||||
<div class="row align-items-center">
|
||||
<div class="col-2">
|
||||
<a href="/" class="logo">
|
||||
<img src="/images/audio-logo.png" alt="Logo" class="d-flex w-100">
|
||||
<img src="/images/audio-logo-demo-2.png" alt="Logo" class="d-flex w-100">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
|
||||
2147
demo-audio-2/index_mobile.html
Normal file
2147
demo-audio-2/index_mobile.html
Normal file
File diff suppressed because it is too large
Load Diff
346
demo-audio-2/js/main_mobile.js
Normal file
346
demo-audio-2/js/main_mobile.js
Normal file
@@ -0,0 +1,346 @@
|
||||
// GLOBALFUNC
|
||||
function globalHandler() {
|
||||
$('#menu').mmenu();
|
||||
setTimeout(function () {
|
||||
$('#menu').removeClass("d-none");
|
||||
}, 500)
|
||||
footerArccodion();
|
||||
}
|
||||
globalHandler();
|
||||
|
||||
function toogleSearchBar() {
|
||||
$('.header-search-box').toggleClass('d-none');
|
||||
}
|
||||
|
||||
function footerArccodion() {
|
||||
document.querySelectorAll(".accordion").forEach((acc) => {
|
||||
acc.addEventListener("click", function () {
|
||||
const nextEl = this.nextElementSibling;
|
||||
if (nextEl.style.maxHeight) {
|
||||
nextEl.style.maxHeight = null;
|
||||
nextEl.style.marginBottom = "0px";
|
||||
} else {
|
||||
nextEl.style.maxHeight = nextEl.scrollHeight + "px";
|
||||
nextEl.style.marginBottom = "10px";
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function viewMoreContent(target) {
|
||||
let htmlStaticBlock = $(target).find(".static-html");
|
||||
let viewMoreBtn = $(target).find(".js-view-more-content");
|
||||
|
||||
htmlStaticBlock.toggleClass("max-height-none").toggleClass("blur");
|
||||
viewMoreBtn.html() === "Xem tất cả +" ? viewMoreBtn.html("Thu gọn -") : viewMoreBtn.html("Xem tất cả +");
|
||||
if (!$(".static-html").hasClass("max-height-none")) document.querySelector(target).scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
// HOMEAPGE FUNC
|
||||
function homepageHandler() {
|
||||
swiperSectionHero();
|
||||
swiperSectionBrand();
|
||||
swiperSectionDealBanner();
|
||||
//swiperDealList();
|
||||
}
|
||||
homepageHandler();
|
||||
|
||||
function swiperSectionHero() {
|
||||
new Swiper(".swiper-section-hero", {
|
||||
spaceBetween: 10,
|
||||
rewind: true,
|
||||
speed: 1000,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: "true",
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function swiperSectionBrand() {
|
||||
new Swiper(".swiper-section-banner", {
|
||||
spaceBetween: 0,
|
||||
slidesPerView: 4,
|
||||
rewind: true,
|
||||
speed: 1000,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: "true",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function swiperDealList() {
|
||||
new Swiper(".swiper-deal-list", {
|
||||
direction: 'vertical',
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 3,
|
||||
rewind: true,
|
||||
speed: 1000,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: "true",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function swiperSectionDealBanner() {
|
||||
new Swiper(".swiper-section-deal-banner", {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 1,
|
||||
rewind: true,
|
||||
speed: 1000,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: "true",
|
||||
},
|
||||
breakpoints: {
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// CATEGORY
|
||||
function categoryHandler() {
|
||||
$('.js-filter-title').click(function () {
|
||||
var check = $(this).parents('.item');
|
||||
if (check.hasClass('active') == true) {
|
||||
check.removeClass('active');
|
||||
$('.product-cate-bannner, .box-product-hot, .p-filter-group').removeClass('active');
|
||||
} else {
|
||||
$('.filter-list-box .item').removeClass('active')
|
||||
$(this).parents('.item').addClass('active')
|
||||
$('.product-cate-bannner, .box-product-hot, .p-filter-group').addClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
$('.js-sort-check .sort-by-list a').each(function () {
|
||||
if ($(this).hasClass('current') == true) {
|
||||
var name = $(this).text();
|
||||
$('.js-sort-check span').text(name)
|
||||
}
|
||||
});
|
||||
|
||||
$('.js-filter-selected').click(function () {
|
||||
if ($(this).hasClass('current') == true) {
|
||||
$(this).removeClass('current');
|
||||
} else {
|
||||
$(this).parents('.js-filter-item').find('.js-filter-selected').removeClass('current');
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
|
||||
$(".popup-filter-group").on("click", function (e) {
|
||||
if (e.target === document.querySelector(".popup-filter-group")) {
|
||||
$(".popup-filter-group").css("display", "none");
|
||||
$("body").removeClass("overflow-hidden");
|
||||
}
|
||||
})
|
||||
|
||||
setTimeout(function () {
|
||||
filter_fixed();
|
||||
}, 500);
|
||||
}
|
||||
categoryHandler();
|
||||
|
||||
function filterPopupListViewMore() {
|
||||
$(".list-holder").each(function () {
|
||||
let summaryHeight = $(this).height();
|
||||
if (summaryHeight >= 133) {
|
||||
} else {
|
||||
$(this).next().css("display", "none");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function showFilterMoreBtn(_this) {
|
||||
$(_this).prev().toggleClass("view-more");
|
||||
let viewMoreEle = $(_this).find(".js-view-more-popup");
|
||||
let viewMoreIcon = $(_this).find(".fa-angle-double-down");
|
||||
|
||||
viewMoreEle.html() === "Xem thêm" ? viewMoreEle.html("Thu gọn") : viewMoreEle.html("Xem thêm");
|
||||
viewMoreIcon.toggleClass("rotate-90deg");
|
||||
}
|
||||
|
||||
function _getLink(current_url) {
|
||||
var brand = 'brand=';
|
||||
var max = '&max=';
|
||||
var min = '&min=';
|
||||
var attr = '&filter=';
|
||||
|
||||
if ($('.js-brand-list a').hasClass('current') == true) {
|
||||
brand = '&brand=' + $('.js-brand-list .current').attr('data-brand');
|
||||
}
|
||||
|
||||
if ($('.js-price-list a').hasClass('current') == true) {
|
||||
max = '&max=' + $('.js-price-list .current').attr('data-max');
|
||||
}
|
||||
|
||||
if ($('.js-price-list a').hasClass('current') == true) {
|
||||
min = '&min=' + $('.js-price-list .current').attr('data-min');
|
||||
}
|
||||
|
||||
$('.js-attr-list .current').each(function () {
|
||||
attr += $(this).attr('data-attr') + '_'
|
||||
});
|
||||
|
||||
var sort = '';
|
||||
if (GetURLParameter('sort')) {
|
||||
sort = '&sort=' + GetURLParameter('sort')
|
||||
}
|
||||
|
||||
var link = current_url + brand + max + min + attr + sort;
|
||||
|
||||
location.href = link;
|
||||
}
|
||||
|
||||
function filter_fixed() {
|
||||
var topTab = $("#js-p-filter-group").offset();
|
||||
if (topTab) {
|
||||
var headerHeight = $('header').height();
|
||||
|
||||
$(window).scroll(function () {
|
||||
if ($(window).scrollTop() > 400) {
|
||||
$(".box-filter-list.box-filter-attribute-list").addClass("fixed");
|
||||
$('#js-filter-block').show();
|
||||
} else {
|
||||
$(".box-filter-list.box-filter-attribute-list").removeClass("fixed");
|
||||
$('#js-filter-block').hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function _openFilter() {
|
||||
$('.popup-filter-group').fadeIn(150);
|
||||
$('body').addClass('overflow-hidden');
|
||||
$('#js-p-filter-group .item.active').removeClass('active');
|
||||
$('.product-cate-bannner, .box-product-hot, .p-filter-group').removeClass('active');
|
||||
filterPopupListViewMore();
|
||||
}
|
||||
|
||||
function _closeFilter() {
|
||||
$('.popup-filter-group').hide();
|
||||
$('body').removeClass('overflow-hidden bg-filter');
|
||||
}
|
||||
|
||||
function GetURLParameter(sParam) {
|
||||
var sPageURL = window.location.search.substring(1);
|
||||
var sURLVariables = sPageURL.split('&');
|
||||
for (var i = 0; i < sURLVariables.length; i++) {
|
||||
var sParameterName = sURLVariables[i].split('=');
|
||||
if (sParameterName[0] == sParam) {
|
||||
return sParameterName[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// PRODUCT DETAIL
|
||||
function detailHandler() {
|
||||
relativeProductSwiper();
|
||||
ratingHover();
|
||||
}
|
||||
detailHandler();
|
||||
|
||||
let galleryThumbs = new Swiper(".gallery-thumbs", {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 5,
|
||||
slideToClickedSlide: true,
|
||||
freeMode: true,
|
||||
watchSlidesProgress: true,
|
||||
centerInsufficientSlides: true,
|
||||
});
|
||||
|
||||
let galleryTop = new Swiper(".gallery-top", {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 1,
|
||||
speed: 1000,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: "true",
|
||||
},
|
||||
thumbs: {
|
||||
swiper: galleryThumbs,
|
||||
},
|
||||
// AUTO SILDED AT FISRT AND END
|
||||
on: {
|
||||
slideChange: function () {
|
||||
let activeIndex = this.activeIndex + 1;
|
||||
|
||||
let activeSlide = document.querySelector(
|
||||
`.gallery-thumbs .swiper-slide:nth-child(${activeIndex})`
|
||||
);
|
||||
let nextSlide = document.querySelector(
|
||||
`.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})`
|
||||
);
|
||||
let prevSlide = document.querySelector(
|
||||
`.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})`
|
||||
);
|
||||
|
||||
if (
|
||||
nextSlide &&
|
||||
!nextSlide.classList.contains("swiper-slide-visible")
|
||||
) {
|
||||
this.thumbs.swiper.slideNext();
|
||||
} else if (
|
||||
prevSlide &&
|
||||
!prevSlide.classList.contains("swiper-slide-visible")
|
||||
) {
|
||||
this.thumbs.swiper.slidePrev();
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function toggleModal(target) {
|
||||
$(target).toggleClass('d-none');
|
||||
$("body").toggleClass('overflow-hidden');
|
||||
}
|
||||
|
||||
function relativeProductSwiper() {
|
||||
new Swiper(".swiper-relative-product", {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 2,
|
||||
rewind: true,
|
||||
speed: 1000,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: "true",
|
||||
},
|
||||
breakpoints: {
|
||||
768: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function ratingHover() {
|
||||
$('.rating-star').hover(function () {
|
||||
$(this).addClass('hover');
|
||||
$('#star_tip').html($(this).attr('data-title'))
|
||||
},
|
||||
function () {
|
||||
$(this).removeClass('hover');
|
||||
$('#star_tip').html($('.rating-review input:checked').attr('data-title'));
|
||||
})
|
||||
}
|
||||
|
||||
function toogleReviewForm(target) {
|
||||
$(target).toggleClass("d-block");
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -114,3 +114,9 @@ $('[data-fancybox="gallery"]').fancybox({
|
||||
}
|
||||
});
|
||||
|
||||
// TOGGLE MODAL
|
||||
function toggleModal(target) {
|
||||
$(target).toggleClass('d-none');
|
||||
$("body").toggleClass('overflow-hidden');
|
||||
}
|
||||
|
||||
|
||||
@@ -1,170 +0,0 @@
|
||||
<script>
|
||||
// DEAL TIME DOWN
|
||||
function dealTimeDown() {
|
||||
// SET TIMER
|
||||
let timeDealLeft = parseInt($(".box-deal .p-item").first().attr("data-time"));
|
||||
const timer = setInterval(timeDown, 1000);
|
||||
|
||||
function timeDown() {
|
||||
// GET TIME LEFT PER SECOND
|
||||
let timeLeft = timeDealLeft;
|
||||
timeDealLeft = timeLeft - 1;
|
||||
|
||||
if ($(".global-time-deal").length) $(".global-time-deal").html(renderTimeLeft(timeLeft));
|
||||
if (timeLeft === 0) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RENDER HOMEPAGE TIME LEFT
|
||||
function renderTimeLeft(timeLeft) {
|
||||
const sec = String(timeLeft % 60).padStart(2, 0);
|
||||
const min = String(Math.trunc((timeLeft / 60) % 60)).padStart(2, 0);
|
||||
const hour = String(Math.trunc(timeLeft / 3600) % 24).padStart(2, 0);
|
||||
const day = String(Math.trunc(timeLeft / 86400) % 3600).padStart(2, 0);
|
||||
|
||||
const firstLetterSec = Math.floor(sec / 10);
|
||||
const secondLetterSec = sec % 10;
|
||||
const firstLetterMin = Math.floor(min / 10);
|
||||
const secondLetterMin = min % 10;
|
||||
const firstLetterHour = Math.floor(hour / 10);
|
||||
const secondLetterHour = hour % 10;
|
||||
const firstLetterDay = Math.floor(day / 10);
|
||||
const secondLetterDay = day % 10;
|
||||
|
||||
return `
|
||||
<p>${firstLetterDay}</p>
|
||||
<p>${secondLetterDay}</p>
|
||||
<span>:</span>
|
||||
<p>${firstLetterHour}</p>
|
||||
<p>${secondLetterHour}</p>
|
||||
<span>:</span>
|
||||
<p>${firstLetterMin}</p>
|
||||
<p>${secondLetterMin}</p>
|
||||
<span>:</span>
|
||||
<p>${firstLetterSec}</p>
|
||||
<p>${secondLetterSec}</p>
|
||||
`;
|
||||
}
|
||||
|
||||
// GET HOT-DEAL PRODUCT
|
||||
function getDealProduct() {
|
||||
let params = {
|
||||
action_type: "list",
|
||||
type: "active",
|
||||
show: 10,
|
||||
}
|
||||
|
||||
let target = "#js-deal-box";
|
||||
|
||||
Hura.Ajax.get("deal", params).then(function (data) {
|
||||
console.log(data.list);
|
||||
let html = Hura.Template.parse(productDealTpl, data.list);
|
||||
Hura.Template.render(target, html);
|
||||
|
||||
saleTimeDown();
|
||||
dealLineWidth();
|
||||
});
|
||||
}
|
||||
|
||||
// RESET IMAGE IN PAGE DEAL
|
||||
function resetImagePageDeal() {
|
||||
if ($(".page-deal").length > 0) {
|
||||
$(".p-item .p-img").each(function () {
|
||||
let firstChild = $(this).children(":first");
|
||||
let lastChild = $(this).find(".swiper-lazy-preloader");
|
||||
let imageDataSrc = firstChild.attr("data-src");
|
||||
firstChild.attr("src", imageDataSrc);
|
||||
lastChild.css("display", "none");
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// CUSTOM BOTTOM LINE PRODUCT DEAL
|
||||
function dealLineWidth() {
|
||||
$(".js-line-deal-left").each(function () {
|
||||
let quantityDealLeft = parseInt($(this).parent().attr("data-quantity-left"));
|
||||
let quantityDealTotal = parseInt($(this).parent().attr("data-quantity-sale-total"));
|
||||
|
||||
if (quantityDealLeft >= 0) {
|
||||
let lineDealWidth = quantityDealLeft / quantityDealTotal * 100 + "%";
|
||||
$(this).css("width", lineDealWidth);
|
||||
} else {
|
||||
$(this).css("width", 0);
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const product_deal_featured_tpl = `
|
||||
<div class="p-info text-right">
|
||||
<a href="{%= item.product_info.productUrl %}">
|
||||
<h3 class="p-name text-24 font-weight-600 mb-4">{%= item.product_info.productName %}</h3>
|
||||
</a>
|
||||
<p class="p-price-sale text-32 font-weight-700 color-primary mb-1">{%= formatCurrency(item.product_info.sale_rules.price) %}₫</p>
|
||||
<p class="p-price-stock text-24 font-weight-500 color-gray-2 text-line-through">
|
||||
{% if (item.product_info.marketPrice > 0) { %}
|
||||
{%= formatCurrency(item.product_info.marketPrice) %}₫
|
||||
{% } else { %}
|
||||
{%= formatCurrency(item.product_info.sale_rules.normal_price) %}₫
|
||||
{% } %}
|
||||
</p>
|
||||
<p class="p-summary font-weight-300 my-4">
|
||||
<span>{%= item.product_info.productSummary %}</span>
|
||||
</p>
|
||||
<div class="wrapper-deal p-relative mb-4" data-deal-left="{%= item.quantity - item.sale_quantity %}" data-deal-total="{%= item.quantity %}">
|
||||
<div class="deal-line total"></div>
|
||||
<div class="deal-line remaining"></div>
|
||||
<i class="static-icons static-icons-static-icon-fire"></i>
|
||||
<p class="sold text-12 color-white">Đã bán {%= item.sale_quantity %}</p>
|
||||
</div>
|
||||
<a href="javascript:addCart({%= item.product_info.productId %});" class="p-cart d-flex align-items-center justify-content-center gap-8">
|
||||
<i class="static-icons static-icons-static-icon-header-cart-pro-big"></i>
|
||||
<span class="text-20 font-weight-500 color-primary text-uppercase">Cho vào giỏ hàng</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="p-image">
|
||||
<a href="{%= item.product_info.productUrl %}">
|
||||
<img src="{%= item.product_info.productImage.large %}" alt="{%= item.product_info.productName %}" class="d-flex w-100">
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const product_deal_list_tpl = `
|
||||
<div class="p-item d-flex gap-16">
|
||||
<a href="{%= item.product_info.productUrl %}" class="p-image">
|
||||
<img src="{%= item.product_info.productImage.large %}" alt="{%= item.product_info.productName %}" class="p-img d-flex w-100">
|
||||
</a>
|
||||
<div class="p-info">
|
||||
<a href="{%= item.product_info.productUrl %}">
|
||||
<h3 class="p-name mt-1">{%= item.product_info.productName %}</h3>
|
||||
</a>
|
||||
<p class="p-price">
|
||||
<span class="p-price-sale">{%= formatCurrency(item.product_info.sale_rules.price) %}₫</span>
|
||||
<span class="p-price-stock">
|
||||
{% if (item.product_info.marketPrice > 0) { %}
|
||||
{%= formatCurrency(item.product_info.marketPrice) %}₫
|
||||
{% } else { %}
|
||||
{%= formatCurrency(item.product_info.sale_rules.normal_price) %}₫
|
||||
{% } %}
|
||||
</span>
|
||||
</p>
|
||||
<div class="wrapper d-flex align-items-end gap-32 mt-2">
|
||||
<div class="wrapper-deal p-relative flex-1 mb-2" data-deal-left="{%= item.quantity - item.sale_quantity %}" data-deal-total="{%= item.quantity %}">
|
||||
<div class="deal-line total"></div>
|
||||
<div class="deal-line remaining js-line-deal-left"></div>
|
||||
<i class="static-icons static-icons-static-icon-fire"></i>
|
||||
<p class="sold text-12 color-white">Đã bán {%= item.sale_quantity %}</p>
|
||||
</div>
|
||||
|
||||
<a href="javascript:addCart({%= item.product_info.productId %});" class="p-cart">
|
||||
<i class="static-icons static-icons-static-icon-header-cart-pro"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
</script>
|
||||
Reference in New Issue
Block a user