HTML部分:
<div class="purchasenum mt25">
<span>购买数量</span>
<i class="minus iconfont icon-subtract"></i>
<input type="number" min="1" step="1" value="1">
<i class="plus iconfont icon-jiahao"></i>
</div>
<div class="addpurchase">
<button type="button" class="add mt25 ml68">
<i class="iconfont icon-gouwuchetianjia"> 加入购物车</i>
</button>
<button type="button" class="purchase mt25 ml18">立即购买</button>
</div>
CSS部分:
.mt25{
margin-top: 25px;
}
.ml18{
margin-left: 18px;
}
.ml68{
margin-left: 68px;
}
.purchasenum > span{
color:#898989;
font-family: "宋体";
padding: 8px 24px 0 0;
}
.purchasenum > i,
.purchasenum > input{
display: inline-block;
width: 30px;
height:30px;
line-height: 30px;
text-align: center;
color:#bbbbbb;
border: 1px solid #cecece;
}
.purchasenum > input{
width:45px;
box-sizing: content-box;
vertical-align: top;
margin-left: -4px;
border-left-style: none;
}
.purchasenum .plus{
margin-left: -4px;
}
.addpurchase > button{
width: 186px;
height: 45px;
font:bold 16px/45px "微软雅黑";
cursor: pointer;
}
.addpurchase .add{
color:#fafbf3;
background-color: #f26a12;
}
.addpurchase .purchase{
border: 1px solid #F46C15;
background-color: #FEF9F6;
color:#F46C15;
}
移动端数量盒
HTML部分:
<div class="purchasenumber">
<h3>购买数量</h3>
<div class="number">
<i class = "minus iconfont icon-jianhao"></i>
<input type="number" min = "1" step="1" value="1">
<i class = "plus iconfont icon-jiahao1"></i>
</div>
</div>
CSS部分:
.purchasenumber {
width: 100%;
height: 25%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #f1f1f1;
}
.purchasenumber .number i,
.purchasenumber .number input {
display: inline-block;
height: 0.6rem;
line-height: 0.6rem;
font-size: 0.2rem;
text-align: center;
border: 1px solid #515151;
color: #323232;
}
.purchasenumber .number i {
width: 0.6rem;
}
.purchasenumber .number input {
width: 0.8rem;
vertical-align: top;
margin-left: -0.08rem;
border-left-style: none;
box-sizing: content-box;
}
.purchasenumber .number .minus {
border-radius: 0.06rem 0 0 0.06rem;
}
.purchasenumber .number .plus {
margin-left: -0.08rem;
border-radius: 0 0.06rem 0.06rem 0;
border-left-style: none;
}
Less部分:
.purchasenumber{
width: 100%;
height: 25%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid @color9;
.number i,
.number input{
display: inline-block;
height: .6rem;
line-height: .6rem;
font-size: .2rem;
box-sizing: content-box;
text-align: center;
border: 1px solid @color10;
color:@color3;
}
.number i{
width: .6rem;
}
.number input{
width: .8rem;
vertical-align: top;
margin-left: -.08rem;
border-left-style: none;
}
.number .minus{
border-radius: .06rem 0 0 .06rem;
}
.number .plus{
margin-left: -.08rem;
border-radius: 0 0.06rem 0.06rem 0;
border-left-style: none;
}
}