HTML:
<div class="check">
<div class="sumup">
<div class="selectall">
<span class="select">
<img src="../images/iconimg/selectCart.jpg" alt="">
</span>
全选
</div>
<p class="price">
总计: <strong> 110.00</strong><br>
<span>不含运费, 已优惠¥13.00</span>
</p>
</div>
<button class="checkout">
去结算(2件)
</button>
</div>
LESS:
.check{
width: 100%;
height: 1.2rem;
max-width: 750px;
border-top: 1px solid @color16;
position: fixed;
bottom: 1.2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
.sumup{
width: 66.67%;
height: 100%;
background-color: @color11;
display: flex;
justify-content: space-around;
align-items: center;
.selectall{
font-size: .22rem;
color:@color17;
line-height: .35rem;
}
.selectall .select{
display: inline-block;
width: .35rem;
height: .35rem;
border-radius: 50%;
border: 1px solid @color4;
text-align: center;
margin-right: .15rem;
img{
width: .17rem;
height: .13rem;
margin-top: .1rem;
}
}
.price{
font: .3rem/.47rem "微软雅黑";
color: @color18;
letter-spacing: .01rem;
strong{
color:@color7;
}
span{
font-size: .2rem;
color:@color19;
}
}
}
.checkout{
width: 33.33%;
height: 100%;
background-color: @color1;
color:@color11;
font-size: .3rem;
}
}
CSS:
.check {
width: 100%;
height: 1.2rem;
max-width: 750px;
border-top: 1px solid #ebebeb;
position: fixed;
bottom: 1.2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.check .sumup {
width: 66.67%;
height: 100%;
background-color: #ffffff;
display: flex;
justify-content: space-around;
align-items: center;
}
.check .sumup .selectall {
font-size: 0.22rem;
color: #676767;
line-height: 0.35rem;
}
.check .sumup .selectall .select {
display: inline-block;
width: 0.35rem;
height: 0.35rem;
border-radius: 50%;
border: 1px solid #b02818;
text-align: center;
margin-right: 0.15rem;
}
.check .sumup .selectall .select img {
width: 0.17rem;
height: 0.13rem;
margin-top: 0.1rem;
}
.check .sumup .price {
font: 0.3rem/0.47rem "微软雅黑";
color: #343434;
letter-spacing: 0.01rem;
}
.check .sumup .price strong {
color: #e5383c;
}
.check .sumup .price span {
font-size: 0.2rem;
color: #a4a4a4;
}
.check .checkout {
width: 33.33%;
height: 100%;
background-color: #f26b11;
color: #ffffff;
font-size: 0.3rem;
}