随机练习

pages2/randomPractice/index.vue

@@ -2,11 +2,21 @@
     <view class="random_practice">
         <nav-bar title="随机练习"></nav-bar>
         <view class="contents">
-            <image src="/pages2/static/random/exam_situ.png" class="examSitu"></image>
             <view class="exam_si">试卷情况</view>
-            <view class="total_Num">本题库共{{ questionNum.totalNum || 0 }}道题，剩余{{ questionNum.totalNum - questionNum.doNum }}题，你已做</view>
-            <view class="do_num">
-                <text class="one">{{ questionNum.doNum || 0}}</text> 题
+            <image src="/pages2/static/random/exam_situ.png" class="examSitu"></image>
+            <view class="nums">
+                <view class="n_item">
+                    <text class="do_num">{{ questionNum.doNum || 0 }}</text>
+                    <text class="word">已完成题数</text>
+                </view>
+                <view class="n_item">
+                    <text class="do_num">{{ questionNum.totalNum || 0 }}</text>
+                    <text class="word">总题数</text>
+                </view>
+                <view class="n_item">
+                    <text class="do_num">{{ accuracy }}</text>
+                    <text class="word">正确率</text>
+                </view>
             </view>
             <view class="number_crad">
                 <view class="title">选择做题数量</view>
@@ -43,9 +53,17 @@ export default {
     onShow() {
         this.getQuestionTempNum()
     },
+    computed: {
+        accuracy() {
+            if (this.questionNum.rightNum >= this.questionNum.totalNum) {
+                return '100%'
+            } else {
+                return (this.questionNum.rightNum/this.questionNum.totalNum).toFixed() + '%'
+            }
+        }
+    },
     methods: {
         changeNum(item) {
-            console.log(item);
             this.number = item
         },
         getQuestionTempNum() {
@@ -72,7 +90,7 @@ export default {
 .random_practice {
     width: 100%;
     padding: 24rpx 26rpx;
-    background: #FFFFFF;
+    background: #FAFAFA;
 }
 .contents {
     width: 100%;
@@ -83,26 +101,37 @@ export default {
     .examSitu {
         width: 200rpx;
         height: 200rpx;
+        margin-bottom: 56rpx;
     }
     .exam_si {
         color: #222222;
         font-size: 32rpx;
         font-weight: bold;
-        margin: 26rpx 0rpx 24rpx 0rpx;
+        margin: 80rpx 0rpx 40rpx 0rpx;
     }
-    .total_Num {
-        font-size: 28rpx;
-        color: #888691;
-        margin-bottom: 24rpx;
-    }
-    .do_num {
-        font-size: 32rpx;
-        font-family: PingFang SC-Bold, PingFang SC;
-        font-weight: bold;
-        color: #222222;
-        .one {
-            font-size: 120rpx;
-            font-family: DIN Alternate-Bold, DIN Alternate;
+    .nums {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        margin-bottom: 132rpx;
+        .n_item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .do_num {
+                font-size: 48rpx;
+                font-family: DIN-Medium, DIN;
+                font-weight: 500;
+                color: #222222;
+                margin-bottom: 8rpx;
+            }
+            .word {
+                font-size: 24rpx;
+                font-family: PingFang SC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #808DA4;
+            }
         }
     }
 }
@@ -111,6 +140,8 @@ export default {
     width: 100%;
     padding: 0rpx 26rpx;
     text-align: center;
+    background-color: #fff;
+    margin-bottom: 178rpx;
     .title {
         font-size: 36rpx;
         font-family: PingFang SC-Medium, PingFang SC;