微信小程式佈局 左1右2(上下)佈局設計,三個圖片,左右佈局
阿新 • • 發佈:2022-12-07
<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> <textclass="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;
}