微信小程序在線考試系統 畢業設計（5）答題卡

wxml代碼

<!--pages/tiku/kaoshi.wxml-->
<view class="biaoti">當前考試答題卡：HTML入門測試</view>


<view class="yanse">
    <view class="yanse_lvse">
        <view  class="yanse_lvse1">序號</view>
        <view  class="yanse_lvse2">已經答題</view>    
    </view>
    <view class="yanse_huise">
        <view  class="yanse_huise1">序號</view>
        <view  class="yanse_huise2">沒有答題</view>
    </view>
</view>




<view class="timu">
    <navigator class="timu_xuhao timu_yida" url="/pages/shipin/index2" >1</navigator>
    <navigator class="timu_xuhao timu_yida" url="/pages/shipin/index2" >2</navigator>
    <navigator class="timu_xuhao timu_yida" url="/pages/shipin/index2" >3</navigator>
    <navigator class="timu_xuhao timu_yida" url="/pages/shipin/index2" >4</navigator>
    <navigator class="timu_xuhao timu_yida" url="/pages/shipin/index2" >5</navigator>
    <navigator class="timu_xuhao timu_yida" url="/pages/shipin/index2" >6</navigator>
    <navigator class="timu_xuhao timu_yida" url="/pages/shipin/index2" >7</navigator>
    <navigator class="timu_xuhao timu_yida" url="/pages/shipin/index2" >8</navigator>
    <navigator class="timu_xuhao timu_yida" url="/pages/shipin/index2" >9</navigator>
    <navigator class="timu_xuhao timu_yida" url="/pages/shipin/index2" >10</navigator>
    <navigator class="timu_xuhao" url="/pages/shipin/index2" >11</navigator>        
    <navigator class="timu_xuhao" url="/pages/shipin/index2" >12</navigator>
    <navigator class="timu_xuhao" url="/pages/shipin/index2" >13</navigator>   
    <navigator class="timu_xuhao" url="/pages/shipin/index2" >14</navigator> 
    <navigator class="timu_xuhao" url="/pages/shipin/index2" >15</navigator> 
    <navigator class="timu_xuhao" url="/pages/shipin/index2" >16</navigator> 
    <navigator class="timu_xuhao" url="/pages/shipin/index2" >17</navigator> 
    <navigator class="timu_xuhao" url="/pages/shipin/index2" >18</navigator> 
    <navigator class="timu_xuhao" url="/pages/shipin/index2" >19</navigator>     
</view>


<view class="caidan">
    <navigator class="caidan_shouye" url="/pages/index/index" open-type="switchTab">
        <image class="caidan_shouye_tu" src="/img/sp01.png"></image>
        <view  class="caidan_shouye_wenzi">首頁</view>
    </navigator>
    <navigator  class="caidan_shoucang" url="/pages/tiku/kaoshi">
        <image class="caidan_shoucang_tu" src="/img/e-off.png"></image>
        <view class="caidan_shoucang_wenzi">返回考試</view>
    </navigator>
    <view class="caidan_goumai">提交試卷</view>
</view>

wxss代碼

/* pages/tiku/kaoshi.wxss */

.biaoti{font-size: 16px; padding:10px; background-color: #f2f2f2; text-align: center;color: rgb(10, 149, 236);
    box-sizing: border-box; text-shadow: 1px 1px 2px gainsboro;}

.yanse{padding: 5px; display: flex;  border-bottom: 1px dotted gainsboro; }
.yanse_lvse{padding: 5px; width: 50%; box-sizing: border-box; display: flex;align-items: center; width: 100%;}
.yanse_lvse1{background-color: green;width:50%;  text-align: center;color: white;}
.yanse_lvse2{color: green; padding-left: 10px;}
.yanse_huise{padding: 5px;width: 50%;box-sizing: border-box; display: flex;align-items: center;width: 100%;}
.yanse_huise1{background-color:#f2f2f2 ;width:50%; text-align: center;}
.yanse_huise2{color: gray;padding-left: 10px;}


.timu{
    display: flex; 
    flex-wrap: wrap;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
}
.timu_xuhao{
    width: 25%;padding: 5px;box-sizing: border-box;font-size: 16px;text-align: center;
    background-color:#f2f2f2;border-radius: 5px;border:5px solid white;
}
.timu_yida{background-color: green; color: white;}

.caidan{
    height: 45px;background-color: white; display: flex;
    position: fixed; bottom: 0; width: 100%; 
    font-size: 15px; color: gray; text-align: center;border-top: 1px solid gainsboro;
  }
  .caidan_shouye{width: 25%; display: flex; flex-direction: column;justify-content: center; align-items: center;border-right: 1px solid gainsboro;}
  .caidan_shouye_tu{width: 20px;height: 20px;}
  .caidan_shouye_wenzi{}
  .caidan_shoucang{width: 25%;display: flex; flex-direction: column;justify-content: center; align-items: center;}
  .caidan_shoucang_tu{width: 16px;height: 16px;}
  .caidan_shoucang_wenzi{}
  .caidan_goumai{width: 50%;line-height: 45px; background-color: orangered; color: white;line-height: 45px; text-align: center;}