样式集（一） 通用商品列表样式

上图：

上代码：

// pages/choosePackage/choosePackage.js
Page({
  data: {
    list:[1,2,3],
  },
  onLoad: function (options) {
  },
  nav_upInfo(){
    wx.navigateTo({
      url: '../upInfo/upInfo',
    })
  },
})

	
		
			
		
		
			华为光猫联通千兆光纤畅爽冰激凌99元套餐
			
				担保金
				199元
			
		
	

/* pages/choosePackage/choosePackage.wxss */
page{
  background-color: #F0F0F8;
  font-size: 34rpx;
}
.item{
  margin: 30rpx 0 30rpx 0;
  width: 94%;
  margin-left: 3%;
  background-color: #ffffff;
  padding-top: 35rpx;
  padding-bottom: 35rpx;
  position: relative;
  border-radius: 12rpx;
}
.title{
  margin-left: 30rpx;
  font-size: 32rpx;
  width: 86%;
  /* font-weight: 600; */
  letter-spacing:2rpx;
}
.detail{
  margin-left: 20rpx;
  font-size: 32rpx;
  margin-top: 28rpx;
  /* font-weight: 600; */
  color: #ff8e00;

}
.tag{
  font-size: 26rpx;
  border-radius: 50rpx;
  color: white;
  background-color: #ff8e00;
  height: 40rpx;
  padding: 5rpx 26rpx 5rpx 26rpx;
  margin-top:27rpx;
  margin-left: 30rpx;

}
.product{
  width: 160rpx;
  height: 160rpx;
  margin-left: 30rpx;
}