微信小程序在線考試系統 畢業設計（4）在線考試頁面

wxml代碼

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

 <view class="timu">
    <view class="timu_xinxi">
        <view class="timu_xinxi1">單選</view>
        <view class="timu_xinxi2">1/20</view>
    </view>
    <view class="timu_neirong">
        在HTML中，使用IMG標籤插入圖像，下列選項關於IMG的src屬性說法正確的是( )
    </view>
 </view>


<radio-group class="xuanxiang">

 <view class="xiangmu">
    <view class="xiangmu_zuo">
        <radio>A 用來設置圖片文件的格式</radio>
    </view>
 </view >
 <view class="xiangmu">
    <view class="xiangmu_zuo">
        <radio>B 用來設置圖片文件所在的位置 </radio>
    </view>
 </view >
  <view class="xiangmu">
    <view class="xiangmu_zuo">
        <radio>C 用來設置鼠標指向圖片時顯示的文字</radio>
    </view>
 </view >
  <view class="xiangmu">
    <view class="xiangmu_zuo">
        <radio>D 用來設置圖片周圍顯示的文字</radio>
    </view>
 </view >



 </radio-group>


<view class="caozuo1">
    <view class="caozuo1_shang">
        <button class="caozuo1_shang_bt">上一題</button>
    </view>
    <view class="caozuo1_xia">
        <button class="caozuo1_xia_bt">下一題</button>
    </view>
</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/kaoti_datika">
        <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 */
page{background-color: #f3f3f3;}

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

.timu{margin: 10px; border-radius: 5px; display: flex; flex-direction: column;background-color: white;}
.timu_xinxi{display: flex; padding: 5px;}
.timu_xinxi1{background-color: rgb(10, 149, 236); border-radius: 5px; width: 4em;text-align: center; padding: 5px; color: white;}
.timu_xinxi2{flex-grow: 1;text-align: right;font-size: 20px; color: rgb(10, 149, 236); padding: 5px;}
.timu_neirong{font-size: 16px; padding: 10px;}

.xuanxiang{padding: 5px;}
.xiangmu{margin: 5px;background-color: white; display: flex; padding: 10px;}
.xiangmu_zuo{color:rgb(10, 149, 236) ;}

.caozuo1{display: flex; padding: 5px;}
.caozuo1_shang{width: 50%;text-align: center;}
.caozuo1_shang_bt{width: 90%; border-radius: 10px; background-color:rgb(10, 149, 236) ; color: white;}
.caozuo1_xia{width: 50%;text-align: center;}
.caozuo1_xia_bt{width: 90%;border-radius: 10px; background-color:rgb(10, 149, 236) ; 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;}