微信 小程序组件 加入购物车全套 one wxss

//1，wxss

/*外部容器*/

.container {

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

box-sizing: border-box;

}

 

/*整体列表*/

.carts-list {

display: flex;

flex-direction: column;

}

 

/*每行单元格*/

.carts-item {

display: flex;

flex-direction: row;

height:220rpx;

/*width属性解决标题文字太短而缩略图偏移*/

width:100%;

align-items: center;

">white;

margin-bottom: 1px;

}

/* 对号图标 */

.carts-choice{

margin-right: 20rpx;

margin-left: 24rpx;

}

/*左部图片*/

.carts-image {

width:160rpx;

height:160rpx;

margin-right: 20rpx;

}

.carts-image image{

width: 100%;

height: 100%;

}

 

 

/*右上部分标题*/

.carts-title {

margin: 10rpx;

font-size: 28rpx;

}

 

/*右下部分价格与数量*/

.carts-subtitle {

font-size: 25rpx;

color:#ff3300;

margin: 20rpx 0 20rpx;

}

 

/*加减号控制数量*/

.stepper{

display: flex;

border-radius: 5px;

text-align: center;

}

.stepper text{

display: block;

width: 50rpx;

height: 50rpx;

border:1px solid #ddd;

line-height: 50rpx;

color: #cccccc;

}

.stepper text.normal{

border:1px solid rgba(221,221,221,1);

}

.stepper text.disabled{

border:1px solid rgba(221,221,221,0.3);

}

.stepper .number{

width: 80rpx;

font-size: 28rpx;

height: 50rpx;

border: 1px solid #ddd;

line-height: 50rpx;

color: #333333;

}

.stepper text:first-child{

border-right: none;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

}

.stepper text:last-child{

border-left: none;

border-top-right-radius: 3px;

border-bottom-right-radius: 3px;

}

.carts-list .delete{

flex: 1;

height: 100%;

position: relative;

}

.delete-img{

width: 32rpx;

height: 32rpx;

position: absolute;

right: 24rpx;

bottom: 20rpx;

}

.delete-img image{

width: 100%;

height: 100%;

vertical-align: top;

}

/* 全选和区结算按钮 ********************************/

/*底部按钮*/

.carts-footer {

width: 100%;

height: 120rpx;

display: flex;

/* flex-direction: row; */

/* justify-content: space-between; */

align-items: center;

position: fixed;

left: 0;

bottom: 0;

">white;

}

 

/*复选框*/

.carts-footer icon {

margin-left: 20rpx;

margin-right: 15rpx;

}

 

/*全选字样*/

.carts-footer text {

font-size: 30rpx;

margin-left: 8rpx;

line-height: 10rpx;

}

.all-chioce{

height: 100%;

border-top: 1px solid #dddddd;

box-sizing: border-box;

flex: 1;

display: flex;

justify-content: space-between;

}

.footer-left{

width: 190rpx;

display: flex;

align-items: center;

}

.footer-right{

padding-right: 25rpx;

flex: 1;

direction: rtl;

}

.right-text{

line-height: 80rpx;

}

.right-text text:last-child{

color: #ff3300;

}

/* .right-text{ */

/* margin-bottom: 10rpx; */

/* } */

.footer-right .free{

font-size: 20rpx;

color:#cccccc;

}

/*立即结算按钮*/

.carts-footer .button {

line-height: 120rpx;

text-align: center;

width:260rpx;

height: 120rpx;

">#ff3300;

color: white;

font-size: 36rpx;

border-radius: 0;

border: 0;

}

/* 全选和区结算按钮 ********************************/

/*复选框样式*/

/* .carts-list icon {

margin-top: 60rpx;

margin-right: 20rpx;

} */