<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;
}
标签：plate,flex,微信,100%,布局,height,width,上下,10px From： https://www.cnblogs.com/cxyyn/p/16963539.html