随机一练页面布局

pages2/randomPractice/index.vue

@@ -2,12 +2,19 @@
     <view class="random_practice">
         <nav-bar title="随机练习"></nav-bar>
         <view class="contents">
-            <view>试卷情况</view>
-            <view>本题库共{{ questionNum.totalNum || 0 }}道题，剩余800题，你已做{{ questionNum.doNum || 0}}</view>
+            <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> 题
+            </view>
             <view class="number_crad">
-                <view>选择做题数量</view>
-                <view v-for="(item, index) in numberLists" :key="index" class="items" @click="changeNum(item)">
-                    {{item}}
+                <view class="title">选择做题数量</view>
+                <view class="crads">
+                    <view v-for="(item, index) in numberLists" :key="index" class="items"
+                     :class="{nactive: item == number}" @click="changeNum(item)">
+                        {{item}}
+                    </view>
                 </view>
                 <view class="starts" @click="startPractice()">
                     开始做题
@@ -62,9 +69,76 @@ export default {
 </script>
 
 <style lang="scss">
+.random_practice {
+    width: 100%;
+    padding: 24rpx 26rpx;
+    background: #FFFFFF;
+}
+.contents {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .examSitu {
+        width: 200rpx;
+        height: 200rpx;
+    }
+    .exam_si {
+        color: #222222;
+        font-size: 32rpx;
+        font-weight: bold;
+        margin: 26rpx 0rpx 24rpx 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;
+        }
+    }
+}
+
 .number_crad {
-    .items {
-        margin-bottom: 28rpx;
+    width: 100%;
+    padding: 0rpx 26rpx;
+    text-align: center;
+    .title {
+        font-size: 36rpx;
+        font-family: PingFang SC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #222222;
+        margin: 56rpx 0rpx;
+    }
+    .crads {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        .items {
+            width: 204rpx;
+            height: 96rpx;
+            line-height: 96rpx;
+            text-align: center;
+            background: #F8F8FA;
+            border-radius: 24rpx;
+            margin-bottom: 28rpx;
+            font-size: 48rpx;
+            font-family: DIN Alternate-Bold, DIN Alternate;
+            font-weight: bold;
+            color: #222222;
+            &.nactive {
+                background: #E8F6FF;
+                color: #3577E8;
+            }
+        }
     }
     .starts {
         width: 646rpx;
@@ -76,6 +150,7 @@ export default {
         font-weight: bold;
         background: #3577E8;
         border-radius: 24rpx;
+        margin: 52rpx 0rpx 40rpx 0rpx;
     }
 }
 </style>