微信小程序布局 左1右2（上下）布局设计，三个图片，左右布局

 

 

  <view class="plate">
    <view class="plate-item plate-l">
      <view class="plate-l-l" bindtap="btn_course">
      <image src="{{_server_url}}img/01.png" class="plate-image1"></image>
      <text class="text1">告别失眠笔记</text>
      <text class="text2">夜夜安眠</text>
      </view>
    </view>
    <view class="plate-item plate-r">
      <view class="plate-r-t" bindtap="btn_course">
        <image src="{{_server_url}}img/02.png" class="plate-image2"></image>
        <text class="text1">致失眠</text>
        <text class="text2">朋友们的一封信</text>
      </view>
      <view class="plate-r-b" bindtap="btn_course">
        <image src="{{_server_url}}img/03.png" class="plate-image3"></image>
        <text class="text1">失眠</text>
        <text class="text2">调查问卷</text>
      </view>
    </view>
  </view>

 

 

/*  plate */
.plate{
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.plate-item{
  width: 50%;
  display: flex;
  align-items:center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.plate-l{

}
.plate-r{

}
.plate-l-l{
  width: 100%; 
  height: 367rpx;
  border-radius: 10px;
}
.plate-r-t{
  top: 0px;
  position: absolute;
  width: 100%;
  height: 50%;
}
.plate-r-b{
  bottom: 0px;
  position: absolute;
  width: 100%;
  height: 50%;
}
.plate-image1{
  width: calc(100% - 10px);
  height: 367rpx;
  border-radius: 10px;
}
.plate-image2{
  width: 100%;
  border-radius: 10px;
  height: calc(100% - 5px);
}
.plate-image3{
  width: 100%;
  border-radius: 10px;
  height: calc(100% - 5px);
  bottom: 0px;
  position: absolute;
}
.plate-item .text1{
  font-size: 18px;
  top: 16px;
  position: absolute;
  width: 100%;
  display: flex;
  font-weight: bold;
  left: 14px;
  color: #fff;
}
.plate-item .text2{
  font-size: 12px;
  top: 44px;
  position: absolute;
  width: 100%;
  display: flex;
  left: 14px;
  color: #fff;
}