welcome.wxml
<view class="container">
<image class="avatar" src="/images/avatar/1.png"></image>
<text class="motto">Hello, 微信</text>
<view class="journey-container" bindtap="onTap">
<text class="journey">开启小程序之旅</text>
</view>
</view>
.container {
display: flex;
flex-direction: column;
align-items: center;
background-color: #b3d4db;
}
.avatar {
width: 200rpx;
height: 200rpx;
margin-top: 160rpx;
}
.motto {
margin-top: 100rpx;
font-size: 32rpx;
font-weight: bold;
}
.journey-container {
margin-top: 200rpx;
border: 1px solid #405f80;
width: 200rpx;
height: 80rpx;
border-radius: 5px;
text-align: center;
}
.journey {
font-size: 22rpx;
font-weight: bold;
line-height: 80rpx;
color: #405f80;
}
此时查看效果:
虽然在设置了container的background-color,但是并没有铺满整个屏幕,导航栏和底部都没有被设置颜色。
可以在welcome.json中设置导航栏的颜色
"navigationBarBackgroundColor": "#b3d4db"
可以在welcome.wxss中设置page样式,使颜色铺满整个屏幕
page {
height: 100%;
background-color: #b3d4db;
}