答题积分小程序云开发-界面交互篇答题成绩页布局样式和逻辑交互开发

<view class="page-con">
  <view class="page">
    <view class="padding">
        <view class="flex flex-wrap solids-bottom padding-bottom margin-bottom">
            <view class='basis-xs'>
              <view class="cu-avatar round lg margin-left">
                <image class="avatar" src="https://blog.51cto.com/images/0.png" mode="widthFix"></image>
              </view>
            </view>
            <view class='basis-xl'>
              <view class="text-bold text-black padding-left-xs padding-top">
                姑苏洛言
              </view>
            </view>
        </view>
    </view>
  </view>
</view>

page {
  background-color: #fff;
}
.page-con {
  padding: 20rpx;
}
.page {
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
}

<view class='page-head'>
    <view class="page-title padding-bottom-xs text-bold text-lg text-black">
      「网络安全知识」答题积分竞赛
    </view>
    <view class="padding-left">您本次获得</view>
    <view class='page-score'>
      <text class="score-num text-bold text-yellow">10积分</text>
    </view>
</view>

.page-score {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top:20rpx;
}
.score-num {
  font-size:100rpx;
}

<view class='flex text-grey text-center margin-bottom padding bg-white radius solids-bottom'>
  <view class='solid-right flex flex-direction flex-sub'>
    <view class="text-yellow text-xxl">1题</view>
    <view class="margin-top-sm">
      答对
    </view>
  </view>
  <view class='solid-right flex flex-direction flex-sub'>
    <view class="text-gray text-xxl">9题</view>
    <view class="margin-top-sm">
      答错
    </view>
  </view>
  <view class='flex flex-direction flex-sub'>
    <view class="text-xxl text-green">
      10%
    </view>
    <view class="margin-top-sm">
      正确率
    </view>
  </view>
</view>

<view class="padding flex flex-direction">
  <button bindtap="toDoTestAgain" class="cu-btn lg round bg-sky"> 继续答题 </button>
  <button bindtap="toIndex" class="cu-btn lg round line-sky margin-top"> 回到主页 </button>
  <button class="cu-btn lg round line-sky margin-top" open-type="share"> 去晒成绩 </button>
</view>

.page-footer {
  margin-top: 0rpx;
  text-align: center;
}

// 返回首页
toIndex(){
    wx.reLaunch({
      url: '../index/index'
    })
},
 
// 再答一次
toDoTestAgain(){
    wx.reLaunch({
      url: '../test/test'
    })
},
 
/**
 * 用户点击右上角分享
 */
onShareAppMessage() {
    return {
      title: '@你，快来「护网专题信息安全知识竞答」，答题赢积分吧~'
    }
}