手把手教你搭建消防安全答题小程序-答题结果页
【手把手教你搭建消防安全答题小程序-答题结果页】手把手教你搭建知识竞答小程序系列，前面的两篇，分别写了如何搭建答题小程序的首页和答题页，今天就让我把答题结果页写写吧。
软件架构：微信原生小程序+云开发
戳源码地址，获取源码，版本持续迭代中...
答题结果页布局
消防安全知识线上答题活动
共20题，满分100分
90分
18题
答对
2题
答错
90%
正确率
答题结果页样式
/* 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;
}答题结果页效果图
文章图片
好了，今天就写到这里了。当前的这个版本，先教大家答题考试小程序端的页面布局与样式编写。下一个迭代版本会接入云开发，全面实现完整的答题考试系统，敬请关注吧。
推荐阅读
- 六步搭建ES6语法环境
- 社会教你顽强，而不是教你失望
- 碎片化阅读，四步教你建立自己的知识体系
- 8种搭配，教你将铅笔裤穿的更有型！
- (1)redis集群原理及搭建与使用(1)
- 桁架搭建有什么价值（）
- VM|VM ware 的 harbor 私有仓库搭建 (Ubuntu16.04)
- PHP开发-Mac搭建ThinkPHP5.0
- Python|Win10下 Python开发环境搭建(PyCharm + Anaconda) && 环境变量配置 && 常用工具安装配置
- sentry搭建错误监控系统（二）