组件&代码块收藏
# 微信原生
# 简单tips模块
<!-- index.wxml -->
<view class="tips">
<text class="iconfont icon-tishi icon"></text>
<text>欢迎使用我们的系统，谢谢~~</text>
</view>
1
2
3
4
5
2
3
4
5
/* index.wxss */
.tips{
/* 背景色 */
background-color: #f5eedf;
/* 字大小 */
font-size: 32rpx;
/* 字颜色 */
color:#e9ab4e;
/* 圆角效果 */
border-radius: 50rpx;
/* 距离上下右左距离 */
margin:30rpx 10rpx 30rpx 10rpx;
padding-left:20rpx ;
}
.icon{
padding-right: 10rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 自定义通知布局模块
.notice{
display: flex;
justify-content: flex-start;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.notice text{
flex-grow:1
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<view class="notice">
<image src="/images/home/board.png" mode="aspectFit" style="width: 200rpx; height: 100rpx;"/>
<text>通知公告</text>
</view>
1
2
3
4
2
3
4
# 自定义双栏图片布局模块
.bottom{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.bottom>view>image{
width: 345rpx;
padding: 10rpx;
height: 200rpx;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<view class="bottom">
<view>
<image src="/images/home/cute_1.jpg" mode="scaleToFill" />
</view>
<view >
<image src="/images/home/cute_2.jpg" mode="scaleToFill" />
</view>
<view>
<image src="/images/home/cute_3.jpg" mode="scaleToFill" />
</view>
<view >
<image src="/images/home/cute_4.jpg" mode="scaleToFill" />
</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
编辑 (opens new window)
上次更新: 2025/07/10, 12:43:44