Small micro-channel program to achieve the effect of the welcome page

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;
}

This time to see the effect:

While setting the container's background-color, but did not covered the entire screen, the navigation bar at the bottom and have not been set color.

You can set the color of the navigation bar in the welcome.json

"navigationBarBackgroundColor": "#b3d4db"

You can set the style in welcome.wxss the page, the color covered the entire screen

page {
  height: 100%;
  background-color: #b3d4db;
}