微信小程序页面排版

1、效果图

2、wxml

<view class="master">

  <view class="home">
    <view class="home1">
      <view class="home2">
        <image src="/image/home1.png" style="40px;height:40px;"></image>
      </view>
      <view class="home3">导航</view>
    </view>

    <view class="home1">
      <view class="home2">
        <image src="/image/home2.png" style="40px;height:40px;"></image>
      </view>
      <view class="home3">海边</view>
    </view>

    <view class="home1">
      <view class="home2">
        <image src="/image/home3.png" style="40px;height:40px;"></image>
      </view>
      <view class="home3">热气球</view>
    </view>

    <view class="home1">
      <view class="home2">
        <image src="/image/home4.png" style="40px;height:40px;"></image>
      </view>
      <view class="home3">自行车</view>
    </view>

  </view>



  <view class="helicopter">
    <view class="helicopter1">
      <image src="/image/helicopter.png" style="30px;height:30px;"></image>
      <text style="margin:10rpx;">我的飞机</text>
    </view>

    <view class="fly">想飞哪里></view>
  </view>



  <view class="thunder">
    <view class="thunder1">
      <image src="/image/thunder.png" style="30px;height:30px;"></image>
      <text style="margin:10rpx;">我的雷电数</text>

    </view>
    <view class="thunder2">
      <view style="50%">10567<text class="ka">kA</text>
      </view>
      <view class="thunder3">
        <view>
          <button class="mini-btn" type="warn" size="mini"
            style="rgb(0, 0, 0);border-radius: 98rpx;height:70rpx;line-height:70rpx;">雷电记录</button>
        </view>
      </view>
    </view>
  </view>



  <view class="stars">

    <view class="stars1">
      <view class="stars3">
        <text style="margin-left:10rpx;">发现一个海星</text>
      </view>
      <view class="stars3">
        <image style="30px;height:30px;margin-left:20rpx;" src="/image/photo.png"></image>
        <text style="margin-left:10rpx;color: rgb(192, 192, 192);">附近海星</text>
      </view>

    </view>

    <view class="stars2">
      <image style="160px;height:140px;" src="/image/stars.png"></image>
    </view>


  </view>



</view>

3、wxss

page{
  background-color:rgb(249, 249, 249);
}

.home{
   90%;
  height: 200rpx;
  background-color: rgb(255, 255, 255);
  margin-left: 5%;
  margin-top: 50rpx;
  display: flex;
  flex-direction: row;
  border-radius: 20rpx;
  
  
}

.home1{
   25%;
  display: flex;
  height: 200rpx;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 22rpx;
  
}

.home2{
  display: flex;
  
}


.home3{
  display: flex;
}



.helicopter{
  height: 100rpx;
   90%;
  background-color: rgb(255, 255, 255);
  margin-left: 5%;
  margin-top: 50rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
}

.helicopter1{
  display: flex;
   50%;
  align-items: center;
  font-size: 24rpx;
  margin-left: 20rpx;
}

.fly{
  display: flex;
  align-items: center;
  justify-content:flex-end;
   50%;
  font-size: 24rpx;
  margin-right: 22rpx;
  color:rgb(180, 182, 185);
}


.thunder{
  height: 300rpx;
   90%;
  background-color: rgb(255, 255, 255);
  margin-left: 5%;
  margin-top: 50rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
}

.thunder1{
  height: 150rpx;
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.thunder2{
  height: 150rpx;
  margin-left: 25rpx;
  font-size: 48rpx;
  display: flex;
  flex-direction: row;
}

.ka{
  font-size: 36rpx;
  margin-left: 20rpx;
}


.thunder3{
  display: flex;
   50%;
  align-items: center;
  justify-content:flex-end;
  margin-right: 20rpx;
}


.stars{
  height: 300rpx;
   90%;
  background-color: rgb(255, 255, 255);
  margin-left: 5%;
  margin-top: 50rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: row;
}

.stars1{
   50%;
}

.stars2{
   50%;
}

.stars3{
  height: 100rpx;
  display: flex;
  margin-left: 20rpx;
  margin-top: 20rpx;
  align-items: center;

}