小程序上展示的效果图

WXML代码

js数据

WXSS样式代码

.container{

  width: 100%;

  padding: 70px 0 0 0;

  height: calc(100vh - 75px);

  display: flex;

}

.container>.left_content{

  width: 200rpx;

  background-color: #f7f7f7;

}

.container>.right_content{

  flex:1;

  background-color: #fefefe;

}

.menu_item{

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 30rpx;

  height: 120rpx;

}

.goods_group{

  border-radius: 12rpx;

  margin: 20rpx 10rpx;

  display: flex;

  flex-wrap: wrap;

}

.goods_title{

  padding: 10rpx 0;

  font-size: 27rpx;

  display: flex;

}

.goods_list{

  display: flex;

  flex-wrap: wrap;

}

.goods_nav{

  width: 30%;

  flex-direction: column;

  text-align: center;

}

.goods_name{

font-size: 27rpx;

}

.goodsImg{

  width: 100%;

}