@charset "utf-8"; body{background: #f5f5f5;} /*cart1购物车1页面*/ /*购物车1、2整体*/ .cart1, .cart2 { width: 100%; /*height: 44.48rem;*/ height: 39.468rem; /*background-color: rgba(255,0,0,.1);*/ } /*购物车1、2顶部*/ /*.cart1 .cart1-top, .cart2 .cart2-top{ width: 100%; height: 5.012rem; background-color: rgba(0,0,255,.5); }*/ /*购物车1、2中部*/ .cart1-middle, .cart2-middle { width: 100%; height: auto; position: relative; margin-bottom: 7rem; } .cart1-middle .cart1-middle-icon{ width: 6.9444rem; height: 6.9444rem; border-radius:50%; /*background: url(../images/cart01.png) no-repeat center center; background-size:60%;*/ background-color: #E1E5E4; position: absolute; top: 7.0048rem; left: 50%; margin-left: -3.5024rem; position: relative; } .cart1-middle-icon em{ display: inline-block; width: 3.172rem; height: 3.172rem; /*border-radius:50%;*/ position: absolute; top: 50%; left: 48%; margin-top: -1.586rem; margin-left: -1.586rem; background-color: green; background: url(../images/cart01.png) no-repeat; background-size:contain; } .cart1-middle .cart1-middle-tips{ width: 19.3237rem; height: 2.4154rem; /*background-color: rgba(0,255,255,.2);*/ position: absolute; top: 15.4589rem; left: 50%; margin-left: -9.6618rem; line-height: 2.4155rem; text-align: center; font-size:1.0870rem; letter-spacing: 0.1208rem; color:#5F5F5F; } .cart1-middle .cart1-middle-btn{ /*width: 8.9372rem; height: 2.1739rem;*/ /*background-color: rgba(0,0,255,.2);*/ position: absolute; top: 19.0821rem; left: 50%; margin-left: -4.4686rem; } .cart1-middle .cart1-middle-btn a{ display: block; width: 8.9372rem; height: 2.1739rem; color:#BF3E29; line-height: 2.0531rem; text-align: center; font-size:1.0870rem; letter-spacing: 2px; border:1px solid #BF3E29; border-radius:0.1208rem; color:#BF3E29; } /*购物车1、2底部*/ .cart1 .cart1-bottom, .cart2 .cart2-bottom { width: 100%; position: fixed; bottom: 0; background-color: #FFFFFF; } .cart1-bottom .cart1-bottom-total, .cart2-bottom .cart2-bottom-total { width: 100%; height: 3.0193rem; border-bottom: 1px solid #eee; } .cart1-bottom .cart1-bottom-total span, .cart2-bottom .cart2-bottom-total span { display: inline-block; height: 3.0193rem; text-align: center; line-height: 3.0193rem; } .cart1-bottom .cart1-bottom-total span:nth-child(1), .cart2-bottom .cart2-bottom-total span:nth-child(1) { width: 7.2464rem; /*background-color: rgba(0,255,255,.2);*/ float: left; color:#6B6B6B; position: relative; line-height: 3.2005rem; padding-left: 0.7850rem; } .cart1-bottom .cart1-bottom-total span:nth-child(1) em, .cart2-bottom .cart2-bottom-total span:nth-child(1) em { display: inline-block; width: 1.45rem; height:1.45rem; border:1px solid #B1B1B1;/*此border为按钮圆圈*/ border-radius:50%; /*background-color: rgba(255,255,255,0);*/ position: absolute; top: 0.7850rem; left: 0.6643rem; } .cart1-bottom .cart1-bottom-total span.selected em, .cart2-bottom .cart2-bottom-total span.selected em{ display: inline-block; width: 1.45rem; height:1.45rem; border-radius:50%; background: url(../images/selected.png) no-repeat; background-size:contain; border:none; position: absolute; top: 0.7850rem; left: 0.6643rem; } .cart1-bottom .cart1-bottom-total span:nth-child(2){ width: 10.8092rem; /*background-color: rgba(0,0,255,.2);*/ float: left; color:#6B6B6B; font-family:"simsun",sans-serif; line-height: 3.2005rem; padding-left: 0.6039rem; } .cart1-bottom .cart1-bottom-total span:nth-child(2) em{ color:#FE2A36; } .cart1-bottom .cart1-bottom-total span:nth-child(3), .cart2-bottom .cart2-bottom-total span:nth-child(3) { width: 6.9444rem; background-color: #C1C5C8; float: right; color:#fff; } .cart2-bottom .cart2-bottom-total span:nth-child(3){ background-color: #EB3E2D; } .cart1-bottom .cart1-bottom-nav, .cart2-bottom .cart2-bottom-nav { width: 100%; height: 3.6232rem; /*background-color: rgba(0,255,0,.3);*/ } .cart1-bottom .cart1-bottom-nav ul li, .cart2-bottom .cart2-bottom-nav ul li { /*width: 103px;*/ width:25%; height: 3.6232rem; /*background-color: rgba(255,255,0,.3);*/ float: left; padding: 0; } .cart1-bottom .cart1-bottom-nav ul li span, .cart2-bottom .cart2-bottom-nav ul li span { display: inline-block; width: 100%; height: 3.6232rem; font-size:0.7246rem; line-height: 5.4348rem; text-align: center; color:#595959; position: relative; } .cart1-bottom-nav ul li span em, .cart2-bottom-nav ul li span em { display: inline-block; width: 1.4493rem; height: 1.4493rem; /*background-color: rgba(0,0,255,.2);*/ position: absolute; top: 0.6039rem; left: 2.3551rem; } .cart1-bottom-nav ul li span em img, .cart2-bottom-nav ul li span em img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /*cart2购物车2页面,主要样式与购物车1重合,以下为区别部分*/ /*购物车2整体*/ .cart2{ position: absolute; top: 0; left: 0; } /*购物车2中部*/ .cart2 .cart2-middle{ padding-top: 0.700rem; position: static; } .cart2-middle .cart2-middle-goods{ width: 100%; height: 9.60rem; background-color: #fff; margin-bottom: 0.750rem; border-top:1px solid #E2E2E2; border-bottom:1px solid #E2E2E2; } .cart2-middle .cart2-middle-goods .goods-left{ width: 7.55rem; height: 9.60rem; /*background-color: rgba(255,0,255,.1);*/ float: left; position: relative; } .cart2-middle-goods .goods-left em.selected{ width: 1.45rem; height:1.45rem; border:none; background:url(../images/selected.png) no-repeat; background-size:contain; background-color: rgba(0,255,0,.1); position: absolute; top: 2.53rem; left: 0.65rem; } .cart2-middle-goods .goods-left em{ width: 1.45rem; height:1.45rem; border:1px solid #B1B1B1; border-radius:50%; position: absolute; top: 2.53rem; left: 0.65rem; } .cart2-middle-goods .goods-left img{ display: inline-block; width: 4.85rem; height: 4.85rem; border-radius:0.25rem; /*background-color: rgba(255,0,0,0.2);*/ position: absolute; top: 0.90rem; right:0; } .cart2-middle .cart2-middle-goods .goods-right{ width: 17.45rem; height: 9.60rem; /*background-color: rgba(255,255,0,.1);*/ float: left; padding-left: 0.58rem; padding-right: 0.58rem; } .cart2-middle-goods .goods-right>span:nth-child(1){ display: inline-block; width: 16.45rem; height: 6.30rem; /*background-color: rgba(0,255,0,.1);*/ padding-top: 0.90rem; font-size:0.86rem; font-weight:400; color:#303030; position: relative; overflow: hidden; } .cart2-middle-goods .goods-right>span:nth-child(1) em{ display: inline-block; width: 1.35rem; height: 1.35rem; background:url(../images/delete.png) no-repeat; background-size:contain; /*background-color: rgba(255,255,0,0);*/ position: absolute; top:0.65rem; left:14.58rem; cursor: pointer; } .cart2-middle-goods .goods-right>span:nth-child(2){ display: inline-block; width: 16.15rem; height: 3.30rem; /*background-color: rgba(0,0,255,0);*/ border-top: 1px solid #eee; line-height: 3.18rem; } .goods-right>span:nth-child(2) em,.goods-right>span:nth-child(2)>i{ font-size: 1.09rem; letter-spacing: -0.06rem; float: left; color:#ff0000; } .goods-right>span:nth-child(2) span{ display: inline-block; width: 6.86rem; height:2.24rem; background-color: #F5F5F5; float: right; margin-top: 0.50rem; border:1px solid #ccc; text-align: center; line-height: 2.24rem; font-size:1.09rem; border-radius:0.08rem; } .goods-right>span:nth-child(2) span em{ display: inline-block; width:2.18rem; height:100% /*2.13rem*/; } .goods-right>span:nth-child(2) span em:first-child{ border-right: 1px solid #ccc; background:url(../images/minus1.svg) no-repeat center center; background-size:1.51rem 1.51rem; background-color: #fff; /*background-size:contain;*/ float: left; cursor:pointer; background-size: 50% 100%; } .goods-right>span:nth-child(2) span em:last-child{ border-left: 1px solid #ccc; background:url(../images/plus1.svg) no-repeat center center; background-size:1.51rem 1.51rem; background-color: #fff; /*background-size:contain;*/ /*background-color: rgba(250,250,0,0.1);*/ float: right; cursor:pointer; background-size: 50% 100%; } /*购物车2底部*/ .cart2-bottom .cart2-bottom-total span:nth-child(2){ width: 10.8092rem; /*background-color: rgba(0,0,255,.1);*/ float: left; color:#6B6B6B; font-family:"simsun",sans-serif; line-height: 2.99rem; padding-left: 0.6039rem; letter-spacing: 0.08rem; text-align: left; font-size:0.91rem; position: relative; } .cart2-bottom .cart2-bottom-total span:nth-child(2) em{ font-size:1.22rem; letter-spacing: -0.02rem; color:#FE2A36; position: absolute; top: 0.05rem; left: 5.30rem; }