微信小程序实现商品属性联动选择(3)

.title { padding: 10rpx 20rpx; margin: 10rpx 0; border-left: 4rpx solid #ccc; } /*全部属性的主盒子*/ .commodity_attr_list { background: #fff; padding: 0 20rpx; font-size: 26rpx; overflow: hidden; width: 100%; } /*每组属性的主盒子*/ .attr_box { width: 100%; overflow: hidden; border-bottom: 1rpx solid #ececec; display: flex; flex-direction: column; } /*属性名*/ .attr_name { width: 20%; float: left; padding: 15rpx 0; } /*属性值*/ .attr_value_box { width: 80%; float: left; padding: 15rpx 0; overflow: hidden; } /*每个属性值*/ .attr_value { float: left; padding: 0 30rpx; margin: 10rpx 10rpx; border: 1rpx solid #ececec; border-radius:5px; line-height:30px; } /*每个属性选中的当前样式*/ .attr_value_active { border-radius: 10rpx; color: #0089dc; padding: 0 30rpx; border: 1rpx solid #0089dc; /* background: #fff; */ } /*禁用属性*/ .attr_value_disabled { color: #ccc; } /*button*/ .weui-btn-area { margin: 1.17647059em 15px 0.3em; } .weui-btn{ width: 80%; height: 100rpx; border-radius: 3rpx; background-color:#0089dc; color: #fff; }

好了,复制上述代码就可以实现效果哦,赶紧试试吧!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/6fdbd3af2fd42d9bdc76014021c50afe.html