You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.1 KiB
116 lines
2.1 KiB
3 years ago
|
# 微信小程序界面开发笔记
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
图文结合效果：
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
Code：
|
||
|
|
|
||
|
|
```
|
||
|
|
<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>
|
||
|
|
```
|
||
|
|
|
||
|
|
Css:
|
||
|
|
|
||
|
|
```
|
||
|
|
/* 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;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|