1: 正常做题; 2: 免费体验; 3: 错题集; 4: 收藏夹

src/components/question/no-content.vue

 <template>
   <div class="no-question-wrapper">
-    <img v src="../../images/question/correct.png" alt="">
-    <span></span>
+    <img v-if="type == 3" src="../../images/question/no-error.png" alt="">
+    <img v-else-if="type == 4" src="../../images/question/no-collect.png" alt="">
+    <img v-else src="../../images/question/no-collect.png" alt="">
+    <span>{{type == 3 ? "您答错的题目会自动记录在这里哦！" : type == 4 ? "您收藏的题目会自动记录在这里哦！" : "现在没有题目哦！"}}</span>
   </div>
 </template>
 <script>
 export default {
   props: {
-    type: Number | String,
-    default: 1
+    type: { // 1: 正常做题; 2: 免费体验; 3: 错题集; 4: 收藏夹
+      type: Number | String,
+      default: 1
+    }
   }
 }
 </script>
 <style lang="less" scoped>
 .no-question-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding-top: 100px;
+  img {
+    width: 120px;
+    height: 120px;
+  }
+  span {
+    font-size: 15px;
+    color: #999999;
+  }
 }
 </style>
\ No newline at end of file

src/views/question-detail.vue

@@ -2,8 +2,8 @@
   <div class="question-detail-wrapper">
     <QuestionHeader></QuestionHeader>
     <section class="body">
-      <question-content></question-content>
-      <no-question type="listType"></no-question>
+      <question-content v-show="questionList.length"></question-content>
+      <no-content v-show="!questionList.length" :type="listType"></no-content>
     </section>
     <QuestionFooter></QuestionFooter>
     <div style="padding-bottom: 60px;"></div>
@@ -13,15 +13,17 @@
 import QuestionHeader from "@/components/question/header";
 import QuestionContent from "@/components/question/question-content";
 import QuestionFooter from "@/components/question/footer";
+import noContent from "@/components/question/no-content";
 export default {
   components: {
     QuestionHeader,
     QuestionContent,
     QuestionFooter,
+    noContent
   },
   data() {
     return {
-      listType: 1,   // 1: 正常做题; 2: 免费体验; 3: 错题集; 4: 收藏夹
+      listType: 4,   // 1: 正常做题; 2: 免费体验; 3: 错题集; 4: 收藏夹
       questionList: [],
     }
   },