微信 小程序组件 加入购物车全套 one wxss
Posted ThisCall
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信 小程序组件 加入购物车全套 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;
} */