微信小程序7__一行3 列的布局

要实现以下效果：

在index.wxml中增加以下布局代码 

      
       
       
       7/2 微信小程序商村视频课程通知
       
      
      
 

在相应的index.wxss 中增加以下样式

.wx-cells{
  width: 100%;
  margin-top: 15rpx;
  font-size: 14px;  /**整个布局里的文本 总的字体大小，**/
  border-top:1rpx solid gainsboro; /**这是布局的上划线**/
  border-bottom: 1rpx solid chartreuse;/**这是布局的下划线**/

}
.wx-cell{
  display: flex; /** flex 表示左中右布局 */
  padding: 20rpx 25rpx;
  align-items: center; /**表示格子中 每个元素都是居中**/
}
.wx-cell-icon{
  width: 56rpx;
  height: 56rpx;
}
.wx-cell-text{
  flex:1; /** **/
  margin-left:30rpx;
}
.wx-cell-arrow{
  width: 30rpx;
  height: 30rpx;
}

这里用到了两个图片：notice.png，right_arrow.png, 开发者可自行上网拷下来 ， 运行小程序，效果如下：