|
|
@@ -0,0 +1,365 @@
|
|
|
+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;
|
|
|
+}
|
|
|
+.windInfoBox .val{
|
|
|
+ padding-left: .12rem;
|
|
|
+ word-break: break-all;
|
|
|
+ max-width: 1.2rem;
|
|
|
+}
|
|
|
+.changeAddress{
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+@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;
|
|
|
+ }
|
|
|
+}
|
|
|
+@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;
|
|
|
+ }
|
|
|
+}
|
