亚洲 欧洲 日韩 综合色天使,久久国产Av无码一区二区老太,人妻醉酒被下药迷昏带到诊所 ,亚州老熟女A片AV色欲小说

答題小程序源代碼（可以出題的答題小程序）

投稿用戶 ? ? 創(chuàng)業(yè)雜談 ? 閱讀 1478

手把手教你搭建知識競答小程序系列，前面的兩篇，分別寫了如何搭建答題小程序的首頁和答題頁，今天就讓我把答題結果頁寫寫吧。

軟件架構：微信原生小程序+云開發(fā)

戳消防安全知識競答活動小程序: 優(yōu)質(zhì)的消防安全知識競答活動小程序，內(nèi)含源碼，版本計劃持續(xù)迭代中……，獲取源碼，版本持續(xù)迭代中…

答題結果頁布局

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

答題結果頁效果圖

答題小程序源代碼（可以出題的答題小程序）

好了，今天就寫到這里了。當前的這個版本，先教大家答題考試小程序端的頁面布局與樣式編寫。下一個迭代版本會接入云開發(fā)，全面實現(xiàn)完整的答題考試系統(tǒng)，敬請關注吧。

本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 sumchina520@foxmail.com 舉報，一經(jīng)查實，本站將立刻刪除。
如若轉(zhuǎn)載，請注明出處：http://www.qjsdgw.cn/73649.html
贊 (0)
上一篇 2022年8月8日 pm7:28
下一篇 2022年8月8日 pm7:48

相關推薦