Hand in hand to teach you to build knowledge competition applet series, the front two, respectively wrote how to build answer applet home page and answer page, today let me write the answer results page.

Software architecture: wechat native small program + cloud development

Poke source code address, get source code, version continuous iteration…

Answer result page layout

<view class="page"> <view class="padding"> <view class='page-head'> <view class="page-title text-lg text-bold text-black Padding-bottom-xs "> </view> <view> </view> <view class='page-score'> <text class="score-num text-red text-bold">90分</text> </view> </view> </view> <view class='page-score'> </view> </view> </view class='page-footer'> <view class='padding flex text-center text-grey bg-white radius margin-bottom'> <view class='flex Flex-sub flex-direction solid-right'> <view class="text-xxl text-red">18题</view> <view class="margin-top-sm"> </view> <view class='flex flex-sub flex-direction solid-right'> <view class="text-xxl text-gray">2题</view> <view class='flex flex-sub flex-direction solid-right' Class ="margin-top-sm"> </view> <view class='flex flex-sub flex-direction'> <view class="text-green text-xxl"> </view> <view class="margin-top-sm"> </view> </view> <view class="flex padding flex-direction"> <button position Bindtap ="toDoWrong" hover-class="other-button-hover" class="cu-btn bg-red round LG" Bindtap ="toIndex" hover-class="other-button-hover" class="cu-btn line-red round LG margin-top"> </view> </view> <view class="mw-weixin text-center text-gray"> <text class="icon-weixin"></text> meng674782630 </view> </view>Copy the code

Answer result page style

/* pages/results/results.wxss */
page {
  background-color: #fff;
}
.page {
  padding: 30rpx;
}
.mw-avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  overflow: hidden;
}
.page-score {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top:20rpx;
  padding-bottom:20rpx;
}
.score-num {
  font-size:100rpx;
}
.page-footer {
  margin-top:50rpx;
  text-align: center;
}
Copy the code

Answer result page effect drawing

Well, that’s all for today. The current version teaches you how to write the page layout and style for the exam mini program. The next iteration will access cloud development, the full implementation of a complete answer exam system, please pay attention to it.