在线答题

src/project/qujing/AppLegalLearning/testForm.vue

@@ -5,12 +5,16 @@
       <div class="type_left">单选题</div>
       <div><span class="col_blue">{{ activeIndex + 1 }}</span>/{{questionList.length}}</div>
     </div>
+    <div class="topic">
       <div v-for="(item,index) in questionList" :key="index">
         <div v-if="activeIndex === index">
           <div>{{ item.subject }}</div>
-          
+          <div>
+            
+          </div>
         </div>
       </div>
+    </div>
     <div class="btn" @click="next" v-if="activeIndex < questionList.length - 1">下一题</div>
   </div>
 </template>
@@ -21,14 +25,15 @@ export default {
   data() {
     return {
       backgroundNavbar: {
-        // background: "url('./img/navbar.png') no-repeat",
+        background: "url('./img/navbar.png') no-repeat",
         backgroundSize: '100% 100%',
       },
       activeIndex: 0,
+      options: ['A','B','C','D','E','F','G','H','I','J','K','L','M'],
       questionList: [
         {
           index: 0,
-          subject: "第1题",
+          subject: "共产党成立年份是？",
           answer: "答案",
           jiexi: '解析'
         },
@@ -78,12 +83,12 @@ export default {
 <style lang="scss" scoped>
 .testForm {
   // background: url("./img/bg.png") no-repeat;
+  padding: 0 32px;
+  margin-top: 80px;
 
   .type {
     display: flex;
     justify-content: space-between;
-    padding: 0 32px;
-    margin-top: 80px;
     box-sizing: border-box;
     font-size: 28px;
     color: #333333;
@@ -98,6 +103,15 @@ export default {
 
   }
 
+  .topic {
+    background: #FFF;
+    margin-top: 32px;
+    padding: 24px;
+    margin-top: 80px;
+    border-radius: 16px;
+    box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
+  }
+
   .btn {
     position: fixed;
     left: 50%;
@@ -109,6 +123,9 @@ export default {
     text-align: center;
     background: #2D7DFF;
     border-radius: 44px;
+    font-weight: 500;
+    font-size: 34rpx;
+    color: #FFFFFF;
   }
 }
 </style>