手把手教你搭建常识竞答小程序系列,后面的两篇,别离写了如何搭建答题小程序的首页和答题页,明天就让我把答题后果页写写吧。
软件架构:微信原生小程序 + 云开发
戳源码地址,获取源码,版本继续迭代中 …
答题后果页布局
<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> 共 20 题,满分 100 分 </view>
<view class='page-score'>
<text class="score-num text-red text-bold">90 分 </text>
</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>
<view class='flex flex-sub flex-direction solid-right'>
<view class="text-xxl text-gray">2 题 </view>
<view class="margin-top-sm">
答错 </view>
</view>
<view class='flex flex-sub flex-direction'>
<view class="text-green text-xxl">
90%
</view>
<view class="margin-top-sm">
正确率 </view>
</view>
</view>
<view class="flex padding flex-direction">
<button bindtap="toDoWrong" hover-class="other-button-hover" class="cu-btn bg-red round lg"> 再答一次 </button>
<button bindtap="toIndex" hover-class="other-button-hover" class="cu-btn line-red round lg margin-top"> 返回首页 </button>
</view>
</view>
</view>
<view class="mw-weixin text-center text-gray">
<text class="icon-weixin"></text> meng674782630
</view>
</view>
答题后果页款式
/* 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;
}
答题后果页效果图
好了,明天就写到这里了。以后的这个版本,先教大家答题考试小程序端的页面布局与款式编写。下一个迭代版本会接入云开发,全面实现残缺的答题考试零碎,敬请关注吧。