微信小程序8__一行2 列的布局，一行2列的图片布局

如果实现以下效果， 开发者需要怎么样做呢？

在index.wxml中增加以下布局：

 <!-- 一行2列布局，左竖线右文字-->
<view class="text">
  <view class="line-y"></view>
  <text>精品推荐</text>
</view>

 <!--一列2列 布局
  精品推荐-->
  <view class="cps2">
    <view class="cp-item2">
      <image src="/images/juhui.jpeg" class="cp-image2"></image>
      <text>产品名称01</text>
      <text>￥ 21.6</text>
      </view>
      <view class="cp-item2">
      <image src="/images/ersongyi.jpeg" class="cp-image2"></image>
      <text>产品名称02</text>
      <text>￥ 185.6</text>
      </view>
</view>

在index.wxss文件中增加以下样式：

/** 一行2列布局， 左竖线 右文字***/
.line-y{
  width: 3px;
  height: 18px;
  display: inline-block;
  background-color:brown;
  margin-left:1px;
}

view.text{
  display: flex;
  align-items:center;
  position: relative;
  padding:6px;
  background-color: aliceblue;
}
view.text text{
  margin-left:14px;
}


/**精品推荐 1行2列图片的样式**/
.cps2{
  display: flex;
  flex-wrap: wrap; /**自动换行***/
  margin-top:10rpx;
}
.cp-item2{
  width: 48%;
  display: flex;
  align-items:center;
  flex-direction: column;
  padding:5rpx;
}
.cp-image2{
  width: 330rpx;
  height: 330rpx;
}
.cp-item2 text{
  padding-top:10rpx;
  font-size: 35rpx;
  width: 100%;
  text-align:left;
  background-color:aliceblue;
  margin-left:20rpx;
}

实现效果如下 ：