小程序-产品列表页面(products)---模板

产品列表页面(products)—模板
小程序-产品列表页面(products)---模板_第1张图片
在这里插入图片描述

=============================================
1. 路径:pages/tpl/products-tpl.wxml



2. 路径:pages/tpl/products-tpl.wxss

.products-box{
  margin: 0rpx 30rpx 20rpx 30rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
.products-item{
  min-height:300rpx;
  width: 48%;
  border-radius: 10rpx;
  margin-right: 0;
  margin-bottom: 20rpx;
  background-color: #fff;
  /* background-color: #F5F6F5; */
  text-align: center;
}
.products-image{
  margin: 10rpx auto 0 auto;
  width:80%;
  height:220rpx;
  border-radius: 10rpx;
}

.products-item-bottom{
  text-align: center;
  margin-bottom:20rpx;
  color: #333;
}
.products-item-bottom .name{
  font-size: 28rpx;
}
.products-item-bottom .price{
  font-size: 24rpx;
}

小程序-产品列表页面(products)---模板_第2张图片

你可能感兴趣的:(WeChat)