body{ /* background-color: #F8F8F8; */ } #main{ padding: 0 .24rem; } .sectionContainer{ display: flex; justify-content: center; } .elementorContainer{ max-width: 13.2rem; flex: 1; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .pageContainer{ max-width: 18.8rem; margin: 0 auto; padding-bottom: 1rem; } .pageTitle{ color: #333; font-weight: bold; font-size: .34rem; padding-top: .6rem; } .pageDataBox{ padding-top: .6rem; display: flex; justify-content: space-between; } .productConatiner{ flex: 1; } .productModelTitle{ color: #333; font-size: .2rem; font-weight: bold; margin-bottom: .2rem; } .productList{ border-top: .02rem solid rgba(0, 0, 0, .2); border-bottom: .02rem solid rgba(0, 0, 0, .2); padding-top: .36rem; } .productItem{ margin-bottom: .24rem; height: 1.4rem; display: flex; align-items: center; position: relative; } .productImgBox{ width: 1.4rem; height: 100%; } .productImgBox img{ width: 100%; height: 100%; } .productInfo{ padding-left: .22rem; flex: 1; display: flex; justify-content: space-between; align-items: center; } .lfBox{ flex: 1; padding-right: .12rem; } .lfBox .productTitle{ font-size: .24rem; font-weight: bold; color: #434343; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; } .lfBox .specs{ font-size: .2rem; color: #999999; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nunberBox{ display: flex; align-items: center; color: #666666; } .numberInput{ font-size: .24rem; font-weight: bold; } .numberReduce,.numberAdd{ cursor: pointer; padding: .12rem .24rem; font-size: .24rem; vertical-align: middle; } .productPrice{ color: #434343; font-weight: bold; font-size: .28rem; width: 3rem; text-align: center; word-break: break-all; } .productDelete{ padding: 0 .36rem; cursor: pointer; } .productDelete img{ width: .24rem; } .windContainer{ width: 4.8rem; margin-left: 1rem; } .windTBox{ display: flex; align-items: center; justify-content: space-between; font-size: .2rem; margin-bottom: .2rem; padding-right: .36rem; } .windTBox .lt{ flex: 1; color: #434343; } .windTBox .cartTotals{ color: #666666; } .linkItem{ border-top: .02rem solid rgba(0, 0, 0, .2); border-bottom: .02rem solid rgba(0, 0, 0, .2); padding: .24rem 0 .16rem 0; } .mbItem{ padding: .12rem 0; margin-bottom: .4rem; } .windInfoBox{ display: flex; align-items: center; justify-content: space-between; color: #999999; font-size: .2rem; line-height: 1.4; margin-bottom: .08rem; padding-right: .36rem; } .windInfoBox .key{ flex: 1; word-break: break-all; } .keyItem{ margin-bottom: .1rem; } .windInfoBox .val{ padding-left: .12rem; word-break: break-all; max-width: 1.2rem; } .windInfoBox.freeshipping .key{ color: rgba(79, 73, 222, 1); } /* new start------------------------ */ #selectABox{ display: none; } #selectAddress{ cursor: pointer; color: rgba(79, 73, 222, 1); padding: .04rem 0; margin-bottom: .08rem; } #addressListBox{ padding-bottom: .24rem; display: none; } #addressList{ border: .02rem solid rgba(0, 0, 0, .05); padding: .08rem; border-radius: .08rem; max-height: 3rem; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } #addressList::-webkit-scrollbar { display: none; } .addressItem{ display: flex; align-items: center; cursor: pointer; padding: .06rem 0; } .addressItem .iconBox{ font-size: 0; font-size: 0; display: flex; align-items: center; justify-content: center; width: .24rem; height: .24rem; position: relative; } .addressItem .iconBox img{ width: .2rem; height: .2rem; position: absolute; display: block; } .addressItem .iconBox img.sel{ width: .22rem; height: .22rem; display: none; } .addressItem.active .iconBox img.noSel{ display: none; } .addressItem.active .iconBox img.sel{ display: block; } .itAddInfo{ flex: 1; padding: 0 .12rem; font-size: .15rem; color: #999999; word-break: break-all; line-height: 1.4; } .addressDelete{ color: rgba(79, 73, 222, 1); font-size: .14rem; } .selAddressButtonBox{ display: flex; align-items: center; gap: .16rem; justify-content: flex-end; padding-top: .24rem; } #selCancel,#selSave{ background-color: rgba(79, 73, 222, 1); color: #FFF; font-size: .15rem; border-radius: .04rem; height: .4rem; display: flex; align-items: center; justify-content: center; width: 1.2rem; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #selCancel{ border: .02rem solid rgba(0, 0, 0, .2); background: transparent; color: #434343; } #deleteAddressModal{ position: fixed; z-index: 999; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, .5); display: none; } #deleteAddressModal .deleteAddressBox{ border-radius: .06rem; overflow: hidden; margin: 25% auto 0 auto; width: 4rem; padding: .24rem; background-color: #fff; border-radius: .12rem; } .deteTips{ font-size: .24rem; font-weight: bold; word-break: break-all; text-align: center; padding: .12rem 0; line-height: 1.5; } .deteTips #daleteAddInfo{ color: rgba(79, 73, 222, 1); } .deteButtonBox{ display: flex; align-items: center; justify-content: center; padding-top: .24rem; } #cancelDelete,#confirmDelete{ background-color: rgba(79, 73, 222, 1); color: #FFF; font-size: .2rem; border-radius: .04rem; margin: 0 .24rem; height: .5rem; display: flex; align-items: center; justify-content: center; width: 1.3rem; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #cancelDelete{ border: .02rem solid rgba(0, 0, 0, .2); background: transparent; color: #434343; } /* new end------------------------ */ #changeAddress{ cursor: pointer; color: rgba(79, 73, 222, 1); } .totalBox{ display: flex; align-items: center; justify-content: space-between; font-size: .22rem; border-top: .02rem solid rgba(0, 0, 0, .2); padding-top: .32rem; margin-bottom: .48rem; } .totalBox .totalT{ color: #333333; flex: 1; word-break: break-all; font-weight: bold; } .totalBox .totalVal{ color: #999999; max-width: 1.2rem; word-break: break-all; } .payPalButton,.checkoutButton{ background-color: rgba(79, 73, 222, 1); color: #FFF; font-weight: bold; font-size: .22rem; width: 100%; height: .62rem; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: .2rem; } .checkoutButton{ background-color: rgba(51, 55, 59, 1); } .orBox{ display: flex; align-items: center; padding: .06rem .24rem 0 .24rem; margin-bottom: .26rem; } .orBox .link{ flex: 1; height: .02rem; background-color: rgba(0, 0, 0, .1); } .orBox .or{ padding: 0 .12rem; font-size: .18rem; font-weight: bold; color: #999999; } #addressContainer{ margin-bottom: .24rem; display: none; } .addressItem{ display: flex; align-items: center; padding: .06rem 0; } .addItmeTitle{ width: 1.4rem; text-align: right; font-size: .16rem; color: #999999; padding-right: .08rem; } #areaSelect{ height: .4rem; font-size: .16rem; border: .02rem solid rgba(0, 0, 0, .05); border-radius: .08rem; color: #434343; padding: 0 .12rem; } .addInput{ flex: 1; height: .45rem; font-size: .15rem; border: .02rem solid rgba(0, 0, 0, .05); border-radius: .08rem; padding: 0 .12rem; color: #434343; } #addressButModel{ display: none; } .addressButtonBox{ display: flex; align-items: center; gap: .16rem; justify-content: flex-end; padding-top: .24rem; } #addCancel,#addSave{ background-color: rgba(79, 73, 222, 1); color: #FFF; font-size: .15rem; border-radius: .04rem; height: .4rem; display: flex; align-items: center; justify-content: center; width: 1.2rem; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #addCancel{ border: .02rem solid rgba(0, 0, 0, .2); background: transparent; color: #434343; } #loadingModel{ position: fixed; z-index: 999; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, .5); display: none; } #loadingModel .loadingBox{ border-radius: .06rem; overflow: hidden; font-size: 0; margin: 25% auto 0 auto; width: 1rem; } #loadingModel .loadingBox img{ width: 1rem; } @media (max-width: 1680px) { .productPrice{ width: 2rem; font-size: .24rem; } .windContainer{ margin-left: .6rem; } .productDelete img{ width: .2rem; } .numberInput{ font-size: .2rem; } .lfBox .productTitle{ font-size: .22rem; } .lfBox .specs{ font-size: .18rem; } } @media (max-width: 1499px) { .productPrice{ width: 1.8rem; font-size: .22rem; } .lfBox .productTitle{ font-size: .2rem; } .windContainer{ width: 4rem; } .windTBox{ font-size: .18rem; } .windInfoBox{ font-size: .18rem; } .totalBox{ font-size: .2rem; } .payPalButton,.checkoutButton{ font-size: .2rem; height: .52rem; } .mbItem{ margin-bottom: .3rem; } .pageTitle{ font-size: .3rem; } } @media (max-width: 1299px) { .pageDataBox{ flex-direction: column; align-items: flex-end; } .productConatiner{ width: 100%; } .productList{ padding-left: .12rem; } .windContainer{ margin-left: 0; padding-top: .8rem; } } @media (max-width: 1199px) { .productDelete{ position: absolute; top: 0; right: 0; padding: 0 .12rem .12rem .12rem; } .addItmeTitle{ font-size: .2rem; } #areaSelect{ font-size: .2rem; height: .5rem; } .addInput{ font-size: .2rem; height: .55rem; } #addCancel,#addSave{ font-size: .2rem; height: .5rem; } /* new start------------------------ */ .windContainer{ width: auto; padding-left: .52rem; padding-right: .52rem; } #addressList{ padding: .12rem; max-height: 4rem; } .addressItem{ display: flex; align-items: center; cursor: pointer; padding: .12rem 0; } .addressItem .iconBox{ width: .26rem; height: .26rem; } .addressItem .iconBox img{ width: .24rem; height: .24rem; } .addressItem .iconBox img.sel{ width: .26rem; height: .26rem; } .itAddInfo{ font-size: .22rem; } .addressDelete{ color: rgba(79, 73, 222, 1); font-size: .22rem; } #selCancel,#selSave{ font-size: .2rem; height: .5rem; } #deleteAddressModal .deleteAddressBox{ width: 5rem; padding: .36rem .24rem; } .deteTips{ font-size: .28rem; line-height: 1.5; } #cancelDelete,#confirmDelete{ font-size: .22rem; height: .56rem; } /* new end------------------------ */ } @media (max-width: 750px) { .pageDataBox{ display: block; } .windContainer{ width: auto; padding-left: .52rem; padding-right: .52rem; } .pageTitle{ font-size: .3rem; } .productModelTitle{ font-size: .24rem; } .productItem{ height: auto; min-height: 1.2rem; padding: .12rem 0; margin-bottom: 0; margin-bottom: .12rem; } .productImgBox{ width: 1.2rem; height: 1.2rem; } .lfBox .productTitle{ font-size: .22rem; } .lfBox .specs{ font-size: .2rem; } .productPrice{ text-align: right; font-size: .26rem; } .numberInput{ font-size: .24rem; } .numberReduce,.numberAdd{ font-size: .26rem; } .windTBox{ font-size: .24rem; } .windInfoBox{ font-size: .24rem; } .totalBox{ font-size: .26rem; } .payPalButton,.checkoutButton{ font-size: .26rem; height: .76rem; } .orBox .or{ font-size: .2rem; } .totalBox .totalVal{ max-width: 2rem; } .windInfoBox .val{ max-width: 2rem; } #loadingModel .loadingBox{ margin: 50% auto 0 auto; width: 1.5rem; } #loadingModel .loadingBox img{ width: 1.5rem; } }