xinyi/public/static/index/css/cart.css

@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: 33.7914rem;
	position: relative;
}

.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:0.10rem 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;
}

.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:0.05rem solid #E2E2E2;
	border-bottom:0.05rem 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:0.10rem 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: 13.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;	
}
.quantity em{
	display: flex;
	justify-content: center;
	align-items: center;
}
.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:0.05rem solid #aaa;
	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: 0.01rem solid #aaa;
	background:url(../images/minus1.svg) no-repeat center center;
	background-size:1.2rem 1.2rem;
	background-color: #fff;
	/*background-size:contain;*/
	float: left;
	cursor:pointer;
}
.goods-right>span:nth-child(2) span em:last-child{
	border-left: 0.01rem solid #aaa;
	background:url(../images/plus1.svg) no-repeat center center;
	background-size:1.2rem 1.2rem;
	background-color: #fff;
	/*background-size:contain;*/
	/*background-color: rgba(250,250,0,0.1);*/
	float: right;
	cursor:pointer;
}

/*购物车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;
}