微信小程序在線考試系統 畢業設計（7）考試記錄

wxml代碼

<view class="jilu">
    <view class="jilu_biaoti">  
        <view class="jilu_biaoti1">2020-06-13</view>
        <view class="jilu_biaoti2">JavaScript考試</view>
        <view class="jilu_biaoti3">
            查看解析
        </view>
    </view>
    <view class="jilu_neirong">
        <view class="jilu_neirong1">
            對:8 |
            錯:0 
        </view>
        <view class="jilu_neirong2">
            分數：95
        </view>        
        <view class="jilu_neirong3">
            刪除記錄
        </view>
    </view>
</view>

<view class="h15"></view>

<view class="jilu">
    <view class="jilu_biaoti">  
        <view class="jilu_biaoti1">2020-06-13</view>
        <view class="jilu_biaoti2">JavaScript考試</view>
        <view class="jilu_biaoti3">
            查看解析
        </view>
    </view>
    <view class="jilu_neirong">
        <view class="jilu_neirong1">
            對:8 |
            錯:0 
        </view>
        <view class="jilu_neirong2">
            分數：95
        </view>        
        <view class="jilu_neirong3">
            刪除記錄
        </view>
    </view>
</view>

wxss代碼

.jilu{ display: flex; flex-direction: column;  font-size: 15px; padding: 5px; border-bottom: 1px solid gainsboro; background-color: #f2f2f2;}
.jilu_biaoti{display: flex; padding: 5px;}
.jilu_biaoti1{width: 7em;}
.jilu_biaoti2{flex-grow: 1;justify-content: start;}
.jilu_biaoti3{width: 5em; background-color: #e4e4e4; text-align: center;}
.jilu_neirong{display: flex;padding: 5px;}
.jilu_neirong1{width: 7em;}
.jilu_neirong2{flex-grow: 1;justify-content: start;}
.jilu_neirong3{width: 5em; background-color: orange; color: white; text-align: center;}