手把手教你搭建消防安全答题小程序-答题结果页

手把手教你搭建知识竞答小程序系列,前面的两篇,分别写了如何搭建答题小程序的首页和答题页,今天就让我把答题结果页写写吧。

软件架构:微信原生小程序+云开发
源码地址,获取源码,版本持续迭代中...

答题结果页布局


  
    
      
        消防安全知识线上答题活动
      
      共20题,满分100分
      
        90分
      
    
    
      
        
          18题
          
            答对
        
        
          2题
          
            答错
        
        
          
            90%
          
          
            正确率
        
      
      
        
        
      
    
  
  
     meng674782630
  

答题结果页样式

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

答题结果页效果图
手把手教你搭建消防安全答题小程序-答题结果页_第1张图片

好了,今天就写到这里了。当前的这个版本,先教大家答题考试小程序端的页面布局与样式编写。下一个迭代版本会接入云开发,全面实现完整的答题考试系统,敬请关注吧。

你可能感兴趣的:(前端)